DRY Leaflet layers & the HTML template literal

Community Help
1

DRY Leaflet Layers

I am working on a map that will have many, many layers:

… When adding in each layer, I use this pattern:

var barhabise_access_road_line = $.getJSON("https://geospatial-analysis.s3.amazonaws.com/NEP/50059-002/barhabise-access-road_line.geojson",function(data){
    L.geoJson(data).addTo(map);
  });

… but I wonder, do I really need to do this for each layer? Or can I instead reference a list of URLs (such as in a CSV file) and thereby only use one function to call in several layers?

I realize that loading in several layers with one function (if possible) would limit my ability to independently style / color each layer, but I expect the trade-off might be that I can define a generic style for a group of similar layers (all blue markers for heritage sites, etc).

HTML Template Literal

Somewhat related: I am trying to defined a content string in a separate named cell, and then referencing that cell by its name in my function:

For example, this would be the content of the named cell:

barhabise_access_road = html`https://geospatial-analysis.s3.amazonaws.com/NEP/50059-002/barhabise-access-road_line.geojson`

which I would then reference in the map cell, like so:

var barhabise_access_road_line = $.getJSON(barhabise_access_road,function(data){
    L.geoJson(data).addTo(map);
  });

It looks like it should work, as the map cell recognizes the named value as being valid (the name turns blue), but the layer won’t appear.

Am I making a simple syntax error? Should I escape something? Or is there another reason this approach doesn’t work?

I note that when I call just the cell by name elsewhere after defining it, I don’t see the string, but instead I am returned an HTML text element. I expect this has something to do with why its not working, but I don’t know how to work around it. Probably I am just being silly…

Thanks in advance for your help and insights!

2

Something like this should work:

Promise.all(["https://geospatial-analysis.s3.amazonaws.com/NEP/50059-002/barhabise-access-road_line.geojson", "another URL"].map(url => d3.json(url).then(data => L.geoJson(data).addTo(map)))

I’m not sure what you’re trying to do with the html template tag so I can’t help you with that.

1 Like
3

Thanks Jed!

As for the template tag - I was just looking at further ways to abstract and shorten the code used to generate each layer. Specifically, I wanted to list out each URL as a separate cell, and just refer to the cell name in the function.

4

OK, I was being foolish.

I confused myself about the HTML rendering after first trying to enter just a string in a named cell, like this:

barhabise_access_road = `https://geospatial-analysis.s3.amazonaws.com/NEP/50059-002/barhabise-access-road_line.geojson`

… The returned string contained the ticks, which appeared to go away after I used the HTML tag. But this was pure folly.

When I instead used double quotes to around my URL, it worked correctly in my function:

barhabise_access_road = "https://geospatial-analysis.s3.amazonaws.com/NEP/50059-002/barhabise-access-road_line.geojson"

Thanks for bearing with me and for the help!

1 Like