CODEWITHSUNDEEP
ajaxleafletgisgeojson
Theodcyning
Theodcyning

Reputation: 23

How to change the styling of a line taken from a GeoJSON with an AJAX call in Leaflet?

I am trying to style a line drawn over the course of the Danube in Leaflet but have been unable to. The line renders, but the color does not change. This is the code I am working with:

    var mymap = L.map('mapid').setView([48, 20], 5);
    var danubeData = new L.GeoJSON.AJAX("danuberiver.json");


  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    id: 'mapbox/light-v10',
    tileSize: 512,
    zoomOffset: -1
  }).addTo(mymap);


  var danubeLine = danubeData.setStyle({color: 'black', weight: 3}).addTo(mymap);

It simply renders as the default blue. How can I change this?

Upvotes: 0

Views: 223

Answers (1)

kaveh
kaveh

Reputation: 2146

If you'd like to set style after load, you need to do it in layeradd event listener, but you can also pass style as an option to L.GeoJSON.AJAX:

var danubeData = new L.GeoJSON.AJAX("danuberiver.json", { style: {color: 'black', weight: 3} });

Here's an example: https://codepen.io/kaveh/pen/GRoagxZ

And here's a similar issue on the plugin Github page: https://github.com/calvinmetcalf/leaflet-ajax/issues/5

Upvotes: 1

Related Questions