CODEWITHSUNDEEP
javascriptleafletgeojsonmarkers
Anna
Anna

Reputation: 1

How do you add markers to a Leaflet map with different images and descriptions?

I have a GeoJSON files with points (lat and long) that are gage stations in watersheds and I want to add them individually to the map in order to show discharge graphs to each of the stations.

I have tried adding points, markers, popups, and the geoJSON files and nothing shows up anywhere on the map. I already have tile layer and the watershed polygons on the map. This is one feature of my GeoJSON:

var geojsonFeature = {
    "type" : "FeatureCollection",
    "crs" : {
      "type" : "name",
      "properties" : {
        "name" : "EPSG:4326"
      }
    },
    "features" : [
      {
        "type" : "Feature",
        "id" : 0,
        "geometry" : {
          "type" : "Point",
          "coordinates" : [
            -81.886014416973211,
            35.365065314637675
          ]
        },
        "properties" : {
          "FID" : 0,
          "FID_1" : 1,
          "Basin" : "BRD",
          "Sq_Miles" : 1513.8948122300001,
          "Acres" : 968892.679825,
          "Name" : "Broad",
          "ORIG_FID" : 0
        }
      },

Upvotes: 0

Views: 2152

Answers (1)

kboul
kboul

Reputation: 14570

Have you checked this tutorial?

Add your geojson to the map and then use onEachFeature function to add geojson metadata to your marker or use them to plot charts as you mentioned.

Example:

  <!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }

  #map {
    width: 600px;
    height: 400px;
  }

</style>


  </head>

  <body>

<div id='map'></div>

<script src="sample-geojson.js" type="text/javascript"></script>

<script>
  var map = L.map('map').setView([39.74739, -105], 2);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(map);





  var geojsonFeature = [{
    "type": "Feature",
    "properties": {
      "FID": 0,
      "FID_1": 1,
      "Basin": "BRD",
      "Sq_Miles": 1513.8948122300001,
      "Acres": 968892.679825,
      "Name": "Broad",
      "ORIG_FID": 0
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-81.886014416973211,
        35.365065314637675
      ]
    },
  }, {
    "type": "Feature",
    "properties": {
      "FID": 1,
      "FID_1": 2,
      "Basin": "Another basin",
      "Sq_Miles": 2313.8948122300001,
      "Acres": 2332892.679825,
      "Name": "another name",
      "ORIG_FID": 4
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-91.886014416973211,
        35.365065314637675
      ]
    }
  }];


  function onEachFeature(feature, layer) {
    const {
      Basin,
      Name,
      Sq_Miles
    } = feature.properties;
    let popupContent = `
    <b>Basin</b>: ${Basin}
    <br>
    <b>Name</b>: ${Name}
    <br>
    <b>Square Miles</b>: ${Sq_Miles}
    `

    if (feature.properties && feature.properties.popupContent) {
      popupContent += feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
  }


  L.geoJSON(geojsonFeature, {
    onEachFeature: onEachFeature
  }).addTo(map)

</script>



  </body>

</html>

If you want to render different marker icons you should do something as follows. Use a pointToLayer function instead of onEachFeature where you will pass dynamically the icon you want to render based on conditionals. fi checking the ids. Similar to the answer of this question

   <!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/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


<style>
  html,
  body {
    height: 100%;
    margin: 0;
  }

  #map {
    width: 600px;
    height: 400px;
  }

</style>


  </head>

  <body>

<div id='map'></div>

<script src="sample-geojson.js" type="text/javascript"></script>

<script>
  var map = L.map('map').setView([39.74739, -105], 2);

  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
      '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
      'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/light-v9',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(map);





  var geojsonFeature = [{
    "type": "Feature",
    "properties": {
      "FID": 0,
      "FID_1": 1,
      "Basin": "BRD",
      "Sq_Miles": 1513.8948122300001,
      "Acres": 968892.679825,
      "Name": "Broad",
      "ORIG_FID": 0
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-81.886014416973211,
        35.365065314637675
      ]
    },
  }, {
    "type": "Feature",
    "properties": {
      "FID": 1,
      "FID_1": 2,
      "Basin": "Another basin",
      "Sq_Miles": 2313.8948122300001,
      "Acres": 2332892.679825,
      "Name": "another name",
      "ORIG_FID": 4
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-91.886014416973211,
        35.365065314637675
      ]
    }
  }];

  const marker = iconColor => new L.Icon({
    iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-${iconColor}.png`,
    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
    iconSize: [25, 41],
    iconAnchor: [12, 41],
    popupAnchor: [1, -34],
    shadowSize: [41, 41]
  });

  var pointToLayer = function(feature, latlng) {
    const {
      Basin,
      Name,
      Sq_Miles,
      FID
    } = feature.properties;

    let popupContent = ` 
    <b> Basin </b>: ${Basin} 
          <br>
          
          <b> Name </b>: ${Name} 
          <br>
          
          <b> Square Miles </b>: ${Sq_Miles}
        `




    console.log(FID)



    // read the coordinates from your marker
    var lat = feature.geometry.coordinates[1];
    var lon = feature.geometry.coordinates[0];

    // create a new marker using the icon style
    return L.marker([lat, lon], {
      icon: marker(FID === 0 ? 'red' : FID === 1 ? 'green' : 'blue')
    }).bindPopup(popupContent).addTo(map)
  }


  var layerGroup = L.geoJSON(geojsonFeature, {
    pointToLayer
  })

</script>



  </body>

</html>

Upvotes: 2

Related Questions