How to build a UK County map for your website
Table of contents
- Introduction
- Demonstration
- How to build an interactive map.
- Display and Interaction
- Tool selection requirements.
- Design
- Implement
- Test
- Tips and Reminders for Interactive Maps
- Conclusion and Invitation.
Introduction
A UK County map is a great way of displaying your data and engaging with your customers. Using UK Counties is an intuitive way of displaying specific locations, areas of interest, or complex multi media data and help customers find what they need.
Multiple store locations.
Regions, Counties, Cities or locations.
Corporate CSR/ESG messages, Charities, NGO’s, anyone with a geographical message.
Colour intensity (Choropleth Map) A map which uses colour intensity/shade to indicate data size. Wikipedia - Choropleth
We’ll show you a scalable, flexible and interactive map for your website. Try the map here on your phone, tablet or desktop. See how it zooms to regions, counties or displays data from specific locations.
Demonstration
Interactive maps like the one above have been difficult to implement. Displaying a map that can scale, zoom, display data and work across devices is not easy, but there are great apps to get this job done.
Maps have tended to be based on images. Images don’t scale up, and are complex to create so they are interactive. New technologies are emerging that are a set of x-y coordinates that draw images dynamically. Called SVG or ‘Scalable Vector Graphics’, this technology makes scaling and interaction easy, and because of the way the image is formed from coordinates, it’s suited to mapping and displaying other data.
How to build an interactive map.
Few if any web professionals will build a mapping solution from scratch. It’s a complex task that involves the combination of graphical (SVG) elements, data and location. For that reason, this article focusses on choosing the right tool and implementing it, however for those wishing to build from the ground up, there is much here that might help make the best decisions and avoid the pitfalls.
Display and Interaction
It’s important to decide what information you want to display before you select the tool you will use. Knowing what finished will look like will help you to select a tool that can do what you need (now and into the future) Try to anticipate future requirements and look at what other respected organisations are doing.
One of the best ways to work things out is to use app demonstrations. Doing this on sites like ‘Code Canyon’ will help you to define your requirements before you start final tool selection. I did a quick search in Code Canyon for ‘store finders….’ here’s what I got
What you want to display and how you want the user to interact with your map will help you to choose the most suitable tool from the outset and save time and money.
Tool selection requirements.
The links above show that there are lots of options when choosing a mapping tool. How to choose the right one for you will depend on the core features you need, but above all, look at the number of users of a tool, look at the ratings. Starting by ruling out obsolete tools, and ones with poor support wont help you select the perfect tool, but you can start by not picking a bad one!
This will reduce the candidates to a manageable list. Then you can start to apply your functional criteria.
Creating a list of the key ‘critical’ requirements will help avoid missing something. Try to separate ‘nice to have’ from ‘essential’ features. Insight into priorities will help tool selection and invariably reduces costs, by focusing on key priorities.
If you work in a larger business, discussing the scope of the requirement will save time (sounds obvious, but you’d be surprised how often an important stakeholder is not consulted until after key decisions are made!)
Focus on simplicity - ( and don’t get seduced by stuff you didn’t go looking for.)
Scope of the map: Locations, Countries, Regions et cetera.
Scalability of the map
What you want to happen
The amount of information
How maintainable the solution is, and who is going to have to maintain it
Accuracy of the available data.
Even though the mapping is self defining in terms of what it looks like, there is scope to make it work in context - to satisfy the overall design of the website by using
Design
You new map app will sit in a context, on a page where it will be next to other content. Can you adapt how it looks, does it inherit the design of your website?
Colour,
Typography,
Iconography,
Key,
Images
Links
Process
In Squarespace, we’d always advise implementing first on a test website, in case anything breaks the whole website. In a professional WordPress environment you may have the luxury of a Staging or Development site: test it here.
Once you’re happy that your solution is safe, then build it onto a disabled page, or password locked page not in the navigation. Add a sample of your data and get approval or run it past the team to get a consensus. It’s much easier refining one country than redoing 256!!
Add Raw Data to a suitable spreadsheet
when gathering dat, pay attention to cut and paste - alway paste as plain text
Refine regional groupings or territories
Itentify the location of specific points (Latitude & Longditude)
https://www.latlong.net
https://www.gps-coordinates.net
https://www.doogal.co.uk/LatLong.php
Data points
CSS
Install Graphics and script files
Location of files - things to think about.
Testing
Test on your main desktop
Test of different screen sizes
Test on different devices (not simulations!) - iOS and Android
Different Browsers work in different ways! Test on the main ones for Mac and Windows
Safari
IE
Firefox
Chrome
Test again after changes or updates.
Tips and Reminders for Interactive Maps
Some tips based on hard won experience
Select the right mapping tool by defining the job before you start.
Get one location right before adding lots!
Get someone else to test thoroughly in a systematic way before your launch.
Remember to remove any sample data, or generic text.
Conclusion and Invitation.
There are many mapping apps, selecting the right one should be driven by what you want to display and how you want your visitors to interact. Contact us to discuss the specifics of your requirement and we will offer solution options that fit your needs.
We are writing a detailed article about the tool we use for most jobs but in the meantime, please call 01332 875700 if you’d like a 1:1 30 minute chat about maps!
Isoblue offer a consultancy service to help clients select the right product and implement quickly. Please contact Chris to discuss - better yet, the first 30 minutes are free of charge and might be all you need.