geo JSON usage - Javascript Leaflet

Javascript examples for Leaflet:Configuration

  1. HOME
  2. Javascript
  3. Leaflet
  4. Configuration

Description

geo JSON usage

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"> 
      <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
   </head> 
   <body> 
      <div id="canvas" style="width: 100%; height: 100%;"></div> 
      <script>
        jQuery(document).ready(function () {
            var map = L.map('canvas', { zoomControl: false }).setView([38.82259, -2.8125], 3);
            map.setMaxBounds([[84.67351256610522, -174.0234375], [-58.995311187950925, 223.2421875]]);
            var layer = new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { noWrap: true }).addTo(map);
            var geojsonFeature = {
                "type": "Feature",
                "properties": {
                    "name": "Coors Field",
                    "amenity": "Baseball Stadium",
                    "popupContent": "This is where the Rockies play!"
                },//w  ww.ja  va  2s . c o  m
                "geometry": {
                    "type": "Point",
                    "coordinates": [-104.99404, 39.75621]
                }
            };
            var geoJson = new L.geoJSON(geojsonFeature).addTo(map);
        });
    
      </script>  
   </body>
</html>

Related Tutorials