style a geojson point like a POI with leaflet/mapbox

Question

I am using mapbox.js to render a mapbox map. I am trying to load geojson from my server that contain either a country polygon or a city coordinates (lon,lat).

I have been able to style the country polygons but not the city points/markers. I am not able to modify the geojson to use mapbox simplestyle

Here is the code executed when the page loads (I changed the mapbox map ID):

var southWest = L.latLng(-90, -360), northEast = L.latLng(90, 360);
var bounds = L.latLngBounds(southWest, northEast);

var map = L.mapbox.map('map', 'MapboxMapID', { zoomControl: false, infoControl: true, detectRetina: true, maxBounds: bounds, minZoom: 2, legendControl: {position: 'topright'}});

new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
map.fitBounds(bounds);

var locationsGroup = L.featureGroup().addTo(map);

and then when the user selects a country or city with a selectbox:

    $("#select2-search-up").on("change", function (e) {
    if (e.added) {
        var location = L.mapbox.featureLayer().loadURL('/citiesCountriesID/' + e.added.id).on('ready', function(featLayer) {
            this.eachLayer(function(polygon) {
                polygon.setStyle({
                    stroke:false, fillColor:'red', fillOpacity:0.2
                });
            });
        });
        locationsGroup.addLayer(location);
    } else {
        locationsGroup.eachLayer(function (layer) {
            if (layer._geojson[0]._id == e.removed.id) {
                locationsGroup.removeLayer(layer);
            }
        });
    }
});

Ideally I would like to display a different icon that the standard marker, but I could do with a small red square

Thank you for your inputs

mpmckenna8 mpmckenna8 · Accepted Answer · 2015-01-02T22:46:55

In this example I did some circle markers but I'm pretty sure you can do other basic svg shps or your own .png pretty easy. http://bl.ocks.org/mpmckenna8/db2eef40314fe24e9177

This example from Mapbox also shows how to use a icon from their icon Library which has a lot of choices also. https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

It might also help to see some of your geojson structure to see why it can't use simplestyle

In my bl.ocks example I loaded each of the geojson datasets separately

var begin = L.geoJson(start,{
  pointToLayer:function(feature, latlng){
      return L.circleMarker(latlng,{
        radius:9,
        fillColor: "orange",
        fillOpacity:.7
      })
  }
})

Is how I set up my circles and I set a different L.geoJson to the other data which I left as the default markers.

style a geojson point like a POI with leaflet/mapbox

1 Answers