[et_pb_section fb_built=”1″ _builder_version=”3.22″ da_is_popup=”off” da_exit_intent=”off” da_has_close=”on” da_alt_close=”off” da_dark_close=”off” da_not_modal=”on” da_is_singular=”off” da_has_shadow=”on” da_disable_devices=”off|off|off”][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.7″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]
Plotting locations on a map was a great test of my skills and Googling Skills. There is no easy one-size-fits-all solution when it comes to mapping due to the different features or data needed and used to make each map.
Just like any website page, a maps purpose should always be more than just plotting locations down on a birds-eye view map.
The First Map – Google Maps
It first started when I had a project to display over 1000 historical locations on a map on a website. A task I had never completed before though had experience in databases and looping through said databases for some cool looking website tables.
But the request was to use Google Maps – or at least the free version you can use through Google Drive.
And the final result was this: The First 1000+ Listing interactive Brisbane History Map
This was a great solution… if you didn’t need to group or layer 10s of groups/layers. It was limited to 30 (about?) sub grouping types followed by 4 layer groupings. More or less.
And because there was over 1000 locations, we had to import the data from a spreadsheet. This was a nightmare as the map import tool was not documented on how it allowed you to import extra fields, colors and images.
I ended up exporting a KML map, looking at the code and creating my own place data within Google Sheets for each location.
<Placemark>
<name><![CDATA[Mt Coot-tha Brisbane Botanic Gardens]]></name>
<description><![CDATA[Operated by Brisbane City Council, this is the city’s second largest tourist attraction and the world’s premier sub-tropical gardens. It contains 56 hectares.]]></description>
<ExtendedData>
<Data name='Image Citation'>
<value></value>
</Data>
<Data name='Map Reference'>
<value><![CDATA[Qimagery. SE Qld 1983. Scale: 1:40,000.]]></value>
</Data>
<Data name='References'>
<value><![CDATA[Toowong History Group Inc.]]></value>
</Data>
<Data name='name'>
<value />
</Data>
<Data name='Longitude and Latitude'><value>152°58'33.2"E, 27°28'35.6"S</value>
</Data>
<Data name='Street Address'>
<value><![CDATA[152 Mount Coot Tha Rd, Mount Coot-Tha Mount Coot-Tha]]></value>
</Data>
<Data name='Local Study Area'>
<value><![CDATA[Chapel Hill- Mount Coot-tha]]></value>
</Data>
<Data name='Epoch'>
<value><![CDATA[Late 20th Century]]></value>
</Data>
<Data name='Time Link'>
<value><![CDATA[unstated]]></value>
</Data>
<Data name='Grouping'>
<value><![CDATA[Western]]></value>
</Data>
<Data name='Map Link'>
<value><![CDATA[1983]]></value>
</Data>
<Data name='Image Time Point'>
<value></value>
</Data>
<Data name='Image Link'>
<value></value>
</Data>
</ExtendedData>
<Point>
<coordinates>152.97588889,-27.47655556,0</coordinates>
</Point>
</Placemark>
This code was looped and placed within the exported KML file (removing the old data). I had to import it by layer and then manually select each grouping content.
I had issues with the & sign and it not importing correctly, there was the colors that I could not get to automatically link up, and there was the issue with quotation marks hence the <![CDATA[]]>< being used for a lot of the fields. In Google Sheets, CONCATENATE and SUBSTITUTE where good friends.
Images were not that problematic as you could pass a URL and Google Maps would import them (I don’t know where) and display them nicely.
But Google Maps didn’t like Degrees Minutes Seconds as location data – and that was the data I had at the time.
I came up with this within Google Sheets:
=round(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(SUBSTITUTE(LEFT(trim(A2),LEN(trim(A2))-2),char(34),""),"°",":"),char(39),":")," ","")*24,8)
This was used for both for Lat and Long (split into separate fields). I included the – sign when concatenating the data together. I later learned (a few years later) that Degrees Minutes didn’t work with this formula as the formula focused on the Degrees Minutes and Seconds. Good luck trying to find an easy solution with Google Sheets formulas for that.
And if your wanted to bulk edit the map data (it happened… a few times), I had to start the whole import all over again. completely wiping out my colors and grouping changes.
In the end, I split the map data into its layers just so that I had enough groups per layer. I would switch the maps out with some simple Javascript buttons.
For a lot of data points with little grouping or a small amount of layers, Google Maps would be fine.
The Second Map – Leaflet + WordPress Custom Post Types
The second map: Belief, Thinking, Knowledge, Education, and Scholarship
When I got to this map, Google Maps API was no longer free (different to the Google Drive Maps) and I was not going to try using the old map system so using Google was no longer an option.
As I had too many issues with importing and losing my changes with Google Maps, so I wanted to move to a platform where I was able to code most of the data automatically to how I needed it displayed. And as each location needed its own page, WordPress with its Custom Post Types combined with Advanced Custom Fields was what I needed.
And I happen to stumbled upon Leaflet Maps a few months before starting the project.
Leaflet is “an open-source JavaScript library for mobile-friendly interactive maps”.
Leaflet didn’t provide the map layer but more the framework for the map functions and features. OpenStreetMap was the base map layer which is a great mapping system. It also looked a bit more “mappy-like” compared to Googles style.
The homepage map setup on Leaflet was just what I was needing! It had the location icon with the popup and I later found the plugin for the functionality of a sidebar pop-out. Leaflet also allowed for simple grouping/layer controls as well.
It took a while to work out all the functions and code – the docs where good but lacked examples, and there was not many results to the problems I had within Google search results. I really had to test and test and test.
And coding it into WordPress was fun as I had to really understand WordPress’s CPT system. I got to play with CPT templates and category templates a lot. The best way to learn anything is to dive right in (expect for shark handling, I guess).
Using the WordPress Shortcode feature, I was able to output the map and its data to where I wanted it on a page. I didn’t need to worry about colors, just grouping.
At the time, I was worried how it would handle all the images being outputted into the map. Would my preferred Image Lazy Loading plugin load them all or would it just work nicely?
How I had coded the sidebar allowed the code to switch between locations instead of being outputted and hidden (and being switched with CSS). This meant the images where loaded when Javascript changed the sidebars internal HTML to the new location, allowing the new image code to run and therefore download only that image. Nice.
Creating the template for the location pages was easy and even linking back to the map with a nice map popup was a fun addition to the functionality.
Overall, I now had code I could tweak and edit as needed without having to redo everything each time a grouping or location didn’t work.
The Third Map – Same, but different, but the same
The Third Map: Brisbane Changing Landscape and The Educated Society
This map was built on the foundations of the second map. What changed was the icon colors. Most of the time was spent on Googling on how to added custom icons and align them up correctly. The icons where the same size and type as the default icons, but the default icon code didn’t tell you anything.
I finally found out about the icon position adjustment and spent more time than needed to adjust the icons location on the map to be 100%. Basically, I should have just halved the width and use the icons total height as the adjustments.
As you can see in the map, with over 600 locations, there was a need to start to color-code the locations. It now looks pretty.
A Fourth Map – Just the map, no pages
The Forth Map: Food and Walks
The difference with this map was it had no pages for each location. Which was an WordPress problem. And with some adjustments to the setup of the Custom Post Type, the data was able to be stored in the website but not publicly accessed by its own page.
I didn’t want to keep making custom shortcodes in the backend to place where the map was going. I wanted to make the map within WordPress’s editor. I don’t remember why – but I did. Hello Custom Content Shortcode plugin. I have been using this plugin for almost everything when it comes to content loops within WordPress. It was hard to use at the start as was hard to understand for complex loops etc but for what I use it for – it works.
I also used some new icons (Thanks to Map Icons Collection). There were just enough to make do with some new location types.
The issue came to the darn “-” within Javascript for variable naming. Javascript don’t like “-” in variable names. The icons names had dashes within them as their naming structure and I know I could have just renamed all 300+ of the icons, but I wanted a coded solution. Sadly, Custom Content Shortcode just couldn’t compete the task 100% for me. And I tried really hard not to write my own shortcode to just deal with that one issue.
In the end, my shortcode code was only 4 lines in the function.php file and everything ran smoothly.
Mapping in the future
I would like to test out the map output as json and use javascript to use that instead of making variables for location. That may allow for a lot more flexibility when it comes to the darn dashes as well…
I would also like to look into a search and filter system for the map to help with navigation and finding locations.
Finally, making it more mobile friendly with its UI and UX – Maybe adding it proper looking buttons in the sidebar etc may help with that. Setting it up as a PWA would be cool though I am not sure how I would handle all the images.
Get in contact if you have any questions.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
