Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    
    <title>GeoJSON tutorial - Leaflet</title>
​
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
​
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
​
​
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
​
    
</head>
<body>
​
<div id='map'></div>
​
<script src="sample-geojson.js" type="text/javascript"></script>
​
<script>
  
    const data = [
       {
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.583125,
                   45.0485616
                ],
                [
                   7.5830532999999996,
                   45.0485816
                ],
                [
                   7.58299,
                   45.0486133
                ],
                [
                   7.582893299999999,
                   45.0486066
                ],
                [
                   7.5828682999999995,
                   45.04859
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"normal",
             "color":"#07e36a"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.582795,
                   45.0485149
                ],
                [
                   7.582624999999999,
                   45.0483233
                ],
                [
                   7.581984899999999,
                   45.047521599999996
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.581874999999999,
                   45.0474683
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"steady",
             "color":"#0c63f0"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.5818533,
                   45.047451599999995
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.58182,
                   45.047415
                ],
                [
                   7.5817315999999995,
                   45.047323299999995
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"normal",
             "color":"#07e36a"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.581628299999999,
                   45.0472416
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.58156,
                   45.0472183
                ],
                [
                   7.5814916,
                   45.0472083
                ]
             ]
          }
       },
       {
          "type":"Feature",
          "properties":{
             "type":"normal",
             "color":"#07e36a"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.581415,
                   45.0472216
                ],
                [
                   7.5813333,
                   45.0472533
                ],
                [
                   7.5811233,
                   45.047335
                ],
                [
                   7.580514999999999,
                   45.0474949
                ],
                [
                   7.580055,
                   45.0476416
                ],
                [
                   7.579963299999999,
                   45.0476916
                ],
                [
                   7.579456599999999,
                   45.0480683
                ],
                [
                   7.5787965999999996,
                   45.048355
                ],
                [
                   7.57769,
                   45.0489983
                ],
                [
                   7.576544999999999,
                   45.049524899999994
                ]
             ]
          }
       }
    ]
 
    var map = L.map('map').setView([45.049524899999994, 7.576544999999999], 16);
​
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        id: 'mapbox/light-v9',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);
​
    var baseballIcon = L.icon({
        iconUrl: 'baseball-marker.png',
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28]
    });
​
    function onEachFeature(feature, layer) {
        var popupContent = "<p>I started out as a GeoJSON " +
                feature.geometry.type + ", but now I'm a Leaflet vector!</p>";
​
        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }
​
        layer.bindPopup(popupContent);
    }
​
​
    L.geoJSON(data).addTo(map);
​
    var coorsLayer = L.geoJSON(coorsField, {
​
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: baseballIcon});
        },
​
        onEachFeature: onEachFeature
    }).addTo(map);
​
</script>
​
​
​
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers