Styling and Filtering Maps on SquareWebsites
Learning Objectives
By the end of this chapter, you'll be able to:
- Apply custom styles to maps using SnazzyMaps
- Set up basic filtering to help visitors find specific locations
- Combine styling and filtering to create more engaging maps
Introduction
Maps can transform from basic location markers into engaging, branded experiences that help your visitors navigate your content more effectively. Most SquareWebsites users stick with default map styles, but with a few simple techniques, you can create maps that match your brand and help visitors find exactly what they're looking for.
This chapter covers the practical steps to style your maps and add filtering options that make sense for your audience.
Lessons
Styling Your Maps with SnazzyMaps
SquareWebsites works well with SnazzyMaps, a free service that provides custom map styles. Here's how to get started:
Step 1: Choose Your Style
Visit SnazzyMaps.com and browse their collection. Look for styles that complement your website's colours and feel. You can preview each style before committing.
Step 2: Get the Code
Click on a style you like and copy the JSON code. This code contains all the styling information for your map.
Step 3: Apply to Your Map Block
In your SquareWebsites editor, select your Map Block and look for the styling options. Paste the JSON code into the Custom Style field.
Step 4: Test and Adjust
Preview your map to see how the new style looks with your content. Some styles work better with certain types of locations than others.
Common issues: If your map doesn't display correctly, check that you've copied the complete JSON code without any missing brackets or commas.
Setting Up Basic Map Filtering
Filtering helps visitors focus on specific types of locations rather than seeing everything at once. This works particularly well if you have multiple location types or categories.
Step 1: Organise Your Data
Before adding filters, group your locations into clear categories. For example, if you run a restaurant guide, you might have categories like "Italian", "Vegetarian", or "Takeaway".
Step 2: Add Category Information
In your Map Block settings, make sure each location has category information. This usually goes in the location description or a custom field.
Step 3: Enable Filtering Options
Look for filtering or category options in your Map Block settings. Not all SquareWebsites themes support advanced filtering, so you might need to use a plugin or custom code.
Step 4: Test User Experience
Check that your filters are easy to understand and use. Visitors should be able to quickly find what they're looking for without confusion.
Combining Styles and Filters
The most effective maps combine good styling with useful filtering. Here's how to bring both together:
Step 1: Apply Your Base Style
Start with your chosen SnazzyMaps style as covered in the first lesson.
Step 2: Add Your Filtering
Implement your filtering system, making sure the filter buttons or dropdown menus fit well with your map's visual style.
Step 3: Check Visual Harmony
Ensure your map style doesn't clash with your filter interface. Sometimes you'll need to adjust colours or fonts to make everything work together.
Step 4: Optimise for Mobile
Test your styled and filtered map on mobile devices. Make sure filter buttons are easy to tap and the map remains readable on smaller screens.
Practice
Create a test map with at least 5-10 locations across 2-3 different categories. Apply a custom style from SnazzyMaps and set up basic filtering.
Try answering these questions:
- Does the style complement your website's design?
- Are the filter options clear and useful?
- Does everything work smoothly on mobile?
FAQs
Can I create my own custom map styles?
Yes, if you're comfortable with JSON code, you can create custom styles. SnazzyMaps also has a style editor that makes this easier.
What happens if SnazzyMaps stops working?
Your map will revert to the default Google Maps style. It's worth keeping a backup of your JSON code.
Are there alternatives to SnazzyMaps?
Yes, you can use other mapping services like Mapbox, though the integration process might be different.
Do custom styles slow down my website?
Custom styles add minimal loading time, but complex styles with many customisations might have a slight impact.
Jargon Buster
JSON – A format for storing styling information that maps can understand and apply
Map Block – SquareWebsites' tool for adding maps to your pages
Custom Styles – Visual modifications that change how your map looks beyond the default appearance
Filtering – Showing or hiding specific locations based on categories or criteria
Wrap-up
Custom styled and filtered maps can make your website more engaging and useful for visitors. Start with simple styling changes using SnazzyMaps, then add filtering if it makes sense for your content.
The key is keeping things simple and user-focused. Your map should help visitors find what they need quickly, not overwhelm them with options.
Next, you'll learn about integrating maps with other SquareWebsites features to create even more dynamic experiences.