SeedCode’s ProMaps template comes with support for “neighborhoods” or areas: shapes our users employ to depict things like sales territories or city borders. Usually, these areas are a single, contiguous shape, like the neighborhoods in Seattle shown in red below in a stock copy of ProMaps.
Stock copy of ProMaps showing neighborhood areas in red
But what if an area consists of multiple separated shapes? Much of the time, city, municipal, and congressional boundaries are not just made up of one simple shape, but a set of multiple shapes. Or maybe you want to represent something like national forest boundaries or oil fields as in the examples below:
Oil fields in Indiana; all red areas are one “area” in ProMaps
Zoomed in on oil fields.
It turns out that this can be done with a very small tweak to ProMaps. To do this, we need to first define how to separate the multiple arrays of latitude/longitude pairs for one area. For this example, we’ll stick with formatting similar to JSON. This means each polygon will be wrapped in brackets ( [ ] ), and separated with a comma. When specifying multiple polygons, our object is going to be an array of arrays, so everything will need to be enclosed in brackets to define it as a single array object. Here’s the template for how multi-polygon area data should look:
[[lat,lng lat,lng], [lat,lng lat,lng]]
The next step is to update the “Set Variable [ $sc_areaBorderCoordinates…” script step on line 26 of the “Export Map HTML” script. We’ll update the calculation value with the following:
List ( $sc_areaBorderCoordinates ; "[\"" & Substitute ( $sc_AreaDataRecord ; [ "],\n[" ; "%%" ] ; [ "[" ; "" ] ; [ "]" ; "" ] ; ["%%" ; "\"],[\"" ] ; ["\n" ; "\"¶\"" ]) & "\"]" )
It’s important to note that we’re sticking with ProMaps’ use of return characters to indicate the separation between each lat/long pair. Because of this, it’s vital that you follow the format in the example (no extra line breaks), or the substitute function will result in a malformed object.
With this one script change and formatted data, you’ll be able to see multiple polygons drawn on the map for a single area!
[ba-button link=”https://www.seedcode.com/promaps/” color=”Yellow” target=”blank”]Learn more about the ProMaps template[/ba-button]
