I'm starting to play with code that can generate maps. I am now looking at OSM (OpenStreetMaps) as a great solution. Also LeafletJS makes it very easy to draw maps based on OSM. So far so good.

I would like to be able to draw an outline (boundary) of a county and am trying to understand how this process will look like. Do I first make a call to find coords and then pass them into Leaflet or is there a better way?

I can get boundaries using Nominatim API, but calling like this:

.html?state=tx&county=Lee

And I can draw area in Leaflet like this:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

So, am I overthinking or this is how it works?

I'm starting to play with code that can generate maps. I am now looking at OSM (OpenStreetMaps) as a great solution. Also LeafletJS makes it very easy to draw maps based on OSM. So far so good.

I would like to be able to draw an outline (boundary) of a county and am trying to understand how this process will look like. Do I first make a call to find coords and then pass them into Leaflet or is there a better way?

I can get boundaries using Nominatim API, but calling like this:

https://nominatim.openstreetmap/ui/search.html?state=tx&county=Lee

And I can draw area in Leaflet like this:

var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

So, am I overthinking or this is how it works?

• javascript
• leaflet
• openstreetmap

Share Follow edited Dec 16, 2020 at 20:01 santa asked Dec 16, 2020 at 19:38 santasanta 12.5k5151 gold badges161161 silver badges266266 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can create a single function to get the county geometry and add it to map. Try the following code:

function drawCountyBoundary(county, state)
{
    url = `https://nominatim.openstreetmap/search.php?county=${county}&state=${state}&polygon_geojson=1&format=jsonv2`
    fetch(url).then(function(response) {
    return response.json();
  })
  .then(function(json) {
    geojsonFeature = json[0].geojson;
    L.geoJSON(geojsonFeature).addTo(map);
  });
}

drawCountyBoundary('Lee', 'Tx')