2

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?

Improve this 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 '19 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 '19 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 '19 at 10:39
  • 1
    GeoJSON example: leafletjs.com/examples/geojson – TomazicM Sep 17 '19 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. – alphabetasoup Sep 17 '19 at 19:49
0

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

https://leafletjs.com/examples/layers-control/

Improve this answer
  • 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 '19 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 '19 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 '19 at 16:47
0

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

Improve this answer

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