[GIS] Leaflet Geojson Styling

geojsonleaflet

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() {});

Best Answer

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);
Related Question