CODEWITHSUNDEEP
javascriptleafletmapbox
Grateful-Fisherman
Grateful-Fisherman

Reputation: 5

leaflet markers based on geojson data

I am working on a "Colorado Offroad Trails" webmap for fun and am stuck on an issue. I am very green to Leaflet but have managed to get most of what I want done. My next step is to change my markers based on the trail rating... basically green for easy yellow for medium and red for hard. I created a JSFIDDLE with map. You might have to go tothe trailroute.js or the trailhead.js to make the markers display (hosted on a http site)

So in short i want to change the marker color based on the feature.properties.High_Ratin attribute.

JSFIDDLE: https://jsfiddle.net/GratefulFisherman/Lftnr036/

Code: 

// Mapbox Access Token
L.mapbox.accessToken = 'pk.eyJ1IjoibWF0dHJ1c3NvIiwiYSI6IjVlYzk3OTEzOTczZTEwYTMyNDRjZDA4NDY1MjYzNWNmIn0.0wkKxVGJyO8nEKjn2GcV3A';

// Create the map
var map = L.mapbox.map('map', null, {
minZoom: 7
}).setView([39.117, -105.353], 7);

// Setup basemaps for layer list
var baseMaps = {
Streets: L.mapbox.tileLayer('mapbox.streets'),
Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
};

// Add Streets to the map
baseMaps.Streets.addTo(map);

// Trailhead popup
function onEachFeaturetrailhead(feature, layer) {
if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<h2>" + feature.properties.Trail + '<br></h2>' 
    + "<li>Low Rating | " + feature.properties.Low_Rating + '<br></li>' 
    + "<li>High Rating | " + feature.properties.High_Ratin + '<br></li>' 
    + "<li>Trail Damage | " + '<a href="' + feature.properties.Link + '">Link</a><br></li>' 
    + "<li>Latitude | " + feature.properties.Latitude + '<br></li>' 
    + "<li>Longitude | " + feature.properties.Longitude + '<br></li>' 
    + "<li>Close to | " + feature.properties.Location + '<br></li>' 
    + "<li>County | " + feature.properties.County + '<br></li>' 
    + "<li>Land Owner | " + feature.properties.Land_Owner + "</li>");
}
}

// Trail Tracks Popup
function onEachFeaturetrailtrack(feature, layer) {
if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<b>" + feature.properties.Trail + "</b>");
}
}

// Add the popup to the GeoJSON layer
var geoJsonLayer = L.geoJson(geoJSONtrailhead, {
onEachFeature: onEachFeaturetrailhead
});

// Create new Marker Clusters
var markers = new L.MarkerClusterGroup();

// Add Markers to map
markers.addLayer(geoJsonLayer);
map.addLayer(markers);

// Add Markers to Layer Control
var layerControl = {
"Trail Heads": markers
};

// Add the basemap toggle button with the basemaps in the list
L.control.layers(baseMaps, layerControl).addTo(map);

// GPS Track
var lineStyle = {
"color": "#F4A460",
"weight": 4,
"opactiy": 0
};

// Trail Route Popup
var tracks = L.geoJson(geoJSONtrailtrack, {
onEachFeature: onEachFeaturetrailtrack,
style: lineStyle
});

// Set Scale dependency to a layer
map.on('zoomend', function(e) {
if ( map.getZoom() <= 10 ){ map.removeLayer( tracks )}
else if ( map.getZoom() > 10 ){ map.addLayer( tracks ) }
 });

I honestly have been tooling around looking for a solution but cant find anything. Like i said I am green to this so any help would be appreciated.

Upvotes: 0

Views: 1272

Answers (1)

nathansnider
nathansnider

Reputation: 2873

You can get colored versions of Leaflet's default icon from leaflet-color-markers. You can define L.Icon objects for the various difficulty ratings using those images:

var redIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var yellowIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

(This is simply copying the example code from the color markers site, but you would probably want to change those URLs to point to your own hosted versions of those markers.)

To change the markers of each trailhead depending on the rating, you will want to use the setIcon method within your onEachFeature function and create a function that returns different icons based on the rating:

function onEachFeaturetrailhead(feature, layer) {
  if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<h2>" + feature.properties.Trail + '<br></h2>' 
      + "<li>Low Rating | " + feature.properties.Low_Rating + '<br></li>' 
      + "<li>High Rating | " + feature.properties.High_Ratin + '<br></li>' 
      + "<li>Trail Damage | " + '<a href="' + feature.properties.Link + '">Link</a><br></li>' 
      + "<li>Latitude | " + feature.properties.Latitude + '<br></li>' 
      + "<li>Longitude | " + feature.properties.Longitude + '<br></li>' 
      + "<li>Close to | " + feature.properties.Location + '<br></li>' 
      + "<li>County | " + feature.properties.County + '<br></li>' 
      + "<li>Land Owner | " + feature.properties.Land_Owner + "</li>");
    layer.setIcon(getIcon(feature.properties.High_Ratin));
  }
}

//get icons based on difficulty rating
function getIcon(rating) {
  return rating > 6 ? redIcon :
         rating > 3 ? yellowIcon :
                      greenIcon;
}

Here is an updated fiddle with these changes:

http://jsfiddle.net/nathansnider/p585s265/

Upvotes: 2

Related Questions