2

How can external Geojson feeds be styled in leaflet? To add my external feed I'm using the snip below:

var mygeojson = new L.geoJson();
mygeojson.addTo(map);

$.ajax({
    dataType: "json",
    url: "https://linktomyexternalgeojsonurl",
    success: function(data) {
        $(data.features).each(function(key, data) {
            mygeojson.addData(data);
        });
    }
}).error(function() {});

The Leaflet website offers examples here http://leafletjs.com/examples/geojson.html but when following the map breaks and does not display any marker. I am clearly doing something wrong and it is likely very simple and obvious to anyone but me.

Leaflet example:

var myStyle = {
    "color": "#ff7800",
    "weight": 5,
    "opacity": 0.65
};

L.geoJson(myLines, {
    style: myStyle
}).addTo(map);

My implementation of the Leaflet example:

var myStyle = {
    "color": "#ff7800",
     "weight": 5,
     "opacity": 0.65
    };

var mygeojson = new L.geoJson({
    style: myStyle})
    mygeojson.addTo(map);

    $.ajax({
        dataType: "json",
        url: "https://linktomyexternalgeojsonurl",
        success: function(data) {
            $(data.features).each(function(key, data) {
                mygeojson.addData(data);
            });
        }
    }).error(function() {});
1

First try drawing the layer without specifying a style, does it draw with the default styling ? This will help determine if the problem lies with the style definition or the data itself.

What geometry type is the data ? The style example you have given will symbolise polylines and polygons only.

For point data this will be by default loaded as the default markers. If you wish to edit the style of point data in this way you can use the pointToLayer example given ;

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);
  • Thanks for the response. The layer does draw without specifying a specific style and loads as the default marker. The layer is point data. Using the code example you provided I can't seem to get the layer to draw. I think my issue may be in the way I am calling the geojson - how can i use the example with the way I am calling the geojson? Is there a better way? – tshiffle Mar 26 '15 at 13:37
  • Can you change your constructor for the geoJSON layer to include the pointToLayer function ? e.g. var mygeojson = new L.geoJson({ style: myStyle, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions);}) mygeojson.addTo(map); Note you'll need to include the style definition for geojsonMarkerOptions. – kes Mar 26 '15 at 16:08
  • Hi Kes - thanks. I was able to take your advise and construct the geoJSON layer as such: var acap = new L.GeoJSON.AJAX("myGeoJson.URL", { pointToLayer: function(feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); }}); acap.addTo(map) – tshiffle Mar 26 '15 at 16:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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