0

I cannot figure out how to style all feature points from a local GeoJson file at once using the Mapbox.js. My GeoJSON file has roughly 500 points. I could go through each point in the GeoJSON file and set their properties individually but that is impractical because of the number of points in my file. I'm able to display my points on my map with the code below but can't figure out what code is involved in styling all of these points with a certain color or symbol.

Here is what I have so far (my mapbox api key has been removed):

<!DOCTYPE html>
<html>
<head>
  <title>A leaflet map!</title>

  <link rel="stylesheet" href="/Users/zacharyrobinson1/Desktop/mapbox_tutorial/mapbox.css">
  <script src="/Users/zacharyrobinson1/Desktop/mapbox_tutorial/mapbox.js"></script>
  <script type="text/javascript" src="/Users/zacharyrobinson1/Desktop/mapbox_tutorial/rodents1.geojson"></script>

  <style>
  body {
      margin:0;
      padding:0;
  }
  .map {
      position: absolute;
      top: 0px;
      bottom: 0px;
      width:100%;
  }
  </style>
</head>
<body>

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

  <script>


      L.mapbox.accessToken = '';

      L.mapbox.map('map','mapbox.streets')
          .setView([42.35,-71.08],13)
          .featureLayer.setGeoJSON(rodents1);

  </script>

And here's a snippet of my GeoJSON file:

var rodents1 = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ -71.1491,42.3419 ]
},
"properties": {
"FIELD3":"Rodent"
}
},
Improve this question

1 Answer 1

Reset to default
1

Not clear if you want all the points to be the same color, or styled according to some property in your data (a category of animal, etc.). Assuming the latter, you could set up your map slightly differently and use the pointToLayer function to return a circle marker for each point: 

// make an object to lookup a hex color for each category in your data
var colors = {
    "Rodent": '#ff0000',
    "Fox": '#adadad',
    "Coyote": '#20b2aa'
};

// default marker options for a circle marker
var markerOptions = {
    radius: 8,
    fillColor: "#ff7800", // will be updated for each feature, below
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

// init the map
var map = L.mapbox.map('map','mapbox.streets')
          .setView([42.35,-71.08],13);

// add the geojson: each feature will be styled according to properties in FIELD3
L.geoJson(rodents1, {
    pointToLayer: function (feature, latlng) {
        // set fillColor by looking up FIELD3 key in your colors list
        markerOptions.fillColor = colors[feature.properties[FIELD3]];
        return L.circleMarker(latlng, markerOptions);
    }
}).addTo(map);
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.