I am new to web development and Leaflet/GIS in general.

I have a couple of shapefles, let's say they are roads.shp and utilities.shp. And let's say I have the means to convert these shape files into .json files, so now we have: roads.json and utilities.json.

Now I want to write HTML code to present this data on a leaflet map, putting in mind that the file: roads.json has data in the form of polylines, and the file: utilities.json has data in the form of markers.

After displaying this data on the map, I want to be able to filter them, for example: make 2 radio buttons to show/hide one of them or both of them.

How can this be achieved with code?

closed as off-topic by ahmadhanb, TomazicM, Vince, Kadir Şahbaz, MrXsquared Sep 17 at 14:21

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "When seeking help to debug/write/improve code always provide the desired behavior, a specific problem/error and the shortest code (as formatted text, not pictures) needed to reproduce it in the question body. Providing a clear problem statement and a code attempt helps others to help you." – ahmadhanb, TomazicM, Kadir Şahbaz
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 2
    What have you tried till now? Have a look at Leaflet tutorials leafletjs.com/examples.html and show at least some effort from your side apart from asking a question. – TomazicM Sep 17 at 10:29
  • I've tried tutorials but they demonstrate how to add data within the code, not from json files, I've already tried looking into the documentation of leaflet, otherwise I wouldn't be asking for help! – Rania Sep 17 at 10:37
  • As I said below, I've already taken a look at tutorials like this one leafletjs.com/examples/layers-control ...it's for the filter feature, but it doesn't demonstrate how to apply that on data loaded from json files – Rania Sep 17 at 10:39
  • 1
    GeoJSON example: leafletjs.com/examples/geojson – TomazicM Sep 17 at 10:46
  • I think you're falling into a trap that many new developers fall into: you're thinking six steps ahead, and you don't yet have the experience to recognise the five intermediate steps. Break your problem down further into smaller pieces, then smaller again. Start not with "how to get geojson data into Leaflet for filtering" but "how to load data from disk, in the browser". If you can get your data loaded and console.log'd, then you've done one step. – Richard Law Sep 17 at 19:49

You can work with Layer Groups (one layer for the polylines, one for the markers):


  • I've already seen that and i don't really understand it. Plus, I still don't know how to load my own data onto the map, the link demonstrates this on dummy variables created within the code, not on a json file with data in it. – Rania Sep 17 at 10:19
  • For loading the GeoJSON: leafletjs.com/examples/geojson Take a look on the source code of the example. L.geoJSON(name, { style: pointsstyle, // specify the style of the points onEachFeature: onEachFeature // call a function, that will }).addTo(map); – Jones Sep 17 at 10:59
  • Here are a few examples I've thrown together for a class, it may help.gistechsolutions.com/leaflet/DEMO – Bill Chappell Sep 19 at 16:47

To load the json(geojson) from file, use ajax (jquery ajax or leaflet ajax). see here.

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