Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KZeni/040462ad0262df29c11b6a89a5e405ec to your computer and use it in GitHub Desktop.
Save KZeni/040462ad0262df29c11b6a89a5e405ec to your computer and use it in GitHub Desktop.
How to create a polygon in WP Google Maps from existing region/boundary data (countries, states, provinces, counties, regions, etc.) Ex. https://gist.github.com/KZeni/348b6e0a8298a91ed75fd5ec409a49c9 is US States created using this exact process.

If it shows up as a region when searching via https://nominatim.openstreetmap.org then this process will work. This includes countries, states, counties, cities, parks, and more. OpenStreetMap can be a very valuable tool for map data (the Wikipedia of maps, in a way.)

Free-handing the polygons via the WP Google Maps polygon editor is an option (click to place/remove points, etc. when adding/editing a polygon on a map), but below gets officially detailed & accurate data that prevents overlapping, gaps, and can save time depending on how accurate you want the polygon(s) to be. Below involves a fair number of steps, but this should be the entire process & each step should be rather quick.

https://gis.stackexchange.com/a/192298/151627 and https://gis.stackexchange.com/a/284305/151627 kinda outline the start of things, but here’s the full set of steps.

  1. Do a search for the region via https://nominatim.openstreetmap.org (ex. https://nominatim.openstreetmap.org/ui/search.html?q=linn+county%2C+iowa is a search for “linn county, iowa”)
  2. Replace ui/search.html with search.php (PHP script is able to return the direct results.)
  3. Add &polygon_geojson=1&viewbox=&format=json to the end of the URL to get the GeoJSON data instead of the standard webpage.
  4. Copy the "type":"Polygon","coordinates":[[]] data for the appropriate listing.
    • Important note: This GeoJSON output may have multiple listings as this technically is a “search” that could have multiple results so we need to make sure we’re pulling the coordinates for the correct listing (looking at display_name and other details preceding the coordinates can help establish this.)
    • Since it’s a bunch to look at, I have a quick method of using cmd+f (ctrl+f on Windows) and then search for [[[ and that instantly shows if there’s more than 1 result or not (since there’s one instance of this per result.)
    • Also important: Sometimes it’s a matter of one result having multiple coordinate sets (ex. a region having island[s] outside of the main area). Often, it’s okay to just have the one primary area taken care of and call it good, but sometimes it’s worthwhile to have those “satellite” regions included. If those are also included, then those will need to be separate polygons in WP Google Maps that then just share the same info or are just there for aesthetics. Either way, the trick of searching for [[[ also can help determine if there’s multiple coordinate sets within 1 result or not (if there is, then consider having just the one main area or treating these additional coordinate sets as additional polygons to be created as if they were their own entry within WP Google Maps.)

That gets us the data to be used for the polygon as established by official mapping data (should be reasonably detailed & accurate.)

We then need to take this data and format it in a way that WP Google Maps’ polygon setup supports (which unfortunately swaps latitude & longitude so it doesn’t match the GeoJSON [among others] standard [as an aside, this seems like an oversight during the development of the polygons for WP Google Maps and they can’t just up & change it now given the existing maps out there with their old convention, but this may change in the future.]) As an example of this polygon setup, you can turn to the US States polygon dataset at https://gist.github.com/KZeni/348b6e0a8298a91ed75fd5ec409a49c9. You can see this is comma-separated long & lat values grouped by parenthesis and then comma separated as the polygon’s points are established.

There can be a few ways to go about converting the JSON data from above into the WP Google Maps polygon data, but this is what I found that’s the quickest & most reliable.

  1. Copy the coordinates value from the JSON (mentioned above) from [[[ to ]]] for that value.
  2. Paste that into a plaintext editor (Nova, Sublime Text, Atom, Visual Studio Code, Notepad++, Notepad, etc.)
  3. Do a find and replace all
    • of:
      • ],[
    • for:
      • 
        
    • (the replacement is a single line-break; makes it so there’s one line per coordinate.)
  4. Do a find and replace…
    • of:
      • [[[
    • for:
      • ``
    • (empty; removes the starting brackets)
  5. Do a find and replace…
    • of:
      • ]]]
    • for:
      • ``
    • (empty; removes the ending brackets)
  6. Confirm that there’s nothing but 2 sets of numbers on each line that are then separated by a comma.
  7. Save the file as a CSV file (ex. “polygon.csv”; though the name could be anything as long as it’s a CSV file.)
  8. Open the CSV file in Excel, Numbers, or any other spreadsheet application.
  9. Cut & paste / drag & drop it so that the column that used to be the 1st column is now the 2nd and vice-versa (flipping the latitude & longitude from the GeoJSON standard to match what WP Google Maps uses for its polygon data.)
  10. Save the changes / export it (keeping it as a CSV file & having nothing being added to the data included in the CSV file.)
  11. Open the CSV back up in the plaintext editor.
  12. Do a find and replace all…
    • of:
      • 
        
    • for:
      • ),(
    • (making it so the coordinates are separated by parentheses & a comma instead of a line-break)
  13. Add ( at the beginning.
  14. Add ) at the end.
  15. Optionally (but recommended), save the file for future reference (probably as a TXT file instead of CSV since it’s no longer using CSV formatting.)
  16. Copy & paste the resulting text from that file into the “Polygon data” textbox shown when adding/editing a polygon when editing a map with WP Google Maps.
  17. Save the polygon.
  18. Repeat for additional polygons & certainly re-save the map between polygons to be safe.

The polygon edit screen then does have options for styling, interaction, content to be shown in the map’s infobox/details on hover/click, etc. so that can be done when building out the polygons or afterwards.

Additionally, there is then the ability to export the polygon data set under the Advanced section of WP Google Maps in the site admin. It's certainly helpful to share any known datasets for others to use without everyone wasting time recreating something that's otherwise already been done by someone with public data (a-la what I've done with the US States polygon data at https://gist.github.com/KZeni/348b6e0a8298a91ed75fd5ec409a49c9 and also discuss at https://wordpress.org/support/topic/are-there-any-pre-built-polygon-sets-for-countries-us-states-counties-etc/.)

@KZeni
Copy link
Author

KZeni commented Aug 27, 2020

I could certainly see a more developer-centric approach being quicker for a larger/bulk dataset conversion. These instructions were made to be usable by a non-programmer, if needed.

Somewhat curious if the geodata from https://catalog.data.gov/dataset/united-states-boundary-files (a public domain source), https://www.amcharts.com/download/, and/or similar librar(ies) of pre-existing regional polygon datasets (honoring the licensing) could be utilized for its shape data for a quicker bulk-operation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment