Join our free webinar on data-driven SEO strategies for startup founders. November 7, (8:00 PM - 9:00 PM IST)
Creating an Interactive Map: How to Create a Custom Interactive Map on a Website

Creating an Interactive Map: How to Create a Custom Interactive Map on a Website

Posted on
June 3, 2024

Discovering a Unique Map Feature:

It all started with the curiosity of one of our Webflow developers. Intrigued by a unique file shared in the Webflow community, our developer reached out to Micky Dollimore, a valued member of the Webflow community, to learn more about this intriguing resource.

Micky had generously shared a file that allows users to access a US map with certain customizable features. His intention was simple: to help his fellow Webflow enthusiasts integrate a versatile and interactive US map into their websites with ease.

This file wasn't just a static map; it was a powerful tool designed to enhance Webflow-developed websites. With this resource, users could customize the map to suit their specific needs, whether it be highlighting states, adding interactive elements, or integrating data-driven features.

Inspired by Micky’s generosity and the potential of this tool, our team decided to dive deeper. We wanted to ensure that more Webflow users could benefit from this incredible resource. Thus, we worked on enhancing and optimizing the file, making it even more user-friendly and versatile.

Sharing the Customizable Code:

Firstly, Dollimore provided the developer with the access token for the file. This token initially didn’t work because the file was set to private. However, after Dollimore changed the file’s access from private to public, the access token worked seamlessly.

With the file now accessible, our developer could explore its contents and functionality. This file wasn't just any ordinary map; it was a meticulously crafted tool, designed with customization in mind. Users could easily adapt the map to fit their specific requirements, whether they needed to highlight certain states, add interactive elements, or integrate various data-driven features.

Spotlight on a Customizable Code File:

The file we are highlighting is a customizable code file that displays the US map. It includes several interactive features designed to enhance user engagement:

  • State Highlighting: When hovering over a particular state on the map, the state is highlighted.
  • State Details Display: Simultaneously, the details of the highlighted state are displayed on the left side of the map.

These features make the map not only visually appealing but also highly informative and interactive. When this file is embedded in any Webflow website, these interactive capabilities are seamlessly integrated, offering users a dynamic and engaging experience.

Customizing for a Client:

We wanted to customize this and add it to one of our clients' websites, "Lumber." When we reached out to Dollimore for help during the initial stage of customization, he immediately agreed without hesitation. His willingness to assist showcased the supportive and collaborative nature of the Webflow community.

However, we were not the only ones interested in leveraging this powerful tool. Another potential developer also wanted to give it a try, highlighting the widespread appeal and usefulness of the customizable US map feature.

Functional Differences and Client Needs:

The functionality of Dollimore's code and the functionality our client requested were different. Dollimore's code works in such a way that when you hover over a particular state, a separate section opens on the left with a few details about the state and its unique code. Clicking on the state takes you to its respective linked page.

Our client, "Lumber," wanted a slightly different interaction. Not just one, but two!

For their main website they requested a map with a functionality that, when clicking on a particular state a small pop-up should get triggered with two points of information. Clicking on any points in the  pop-up would then take the user to the respective linked page.

<head>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
</head>
<body>
<script>
mapboxgl.accessToken = 'put your mapbox API key';.
let highlightedStateIDs = [];
let hoveredFeatureId = null;
let stateLinks = {};
let defaultCard = null;
let clickLink, clickLink2; // Declare clickLink and clickLink2 globally
const allCards = document.querySelectorAll('.collection-item');
allCards.forEach((card, index) => {
let cardStateID = card.querySelector ('.collection_div .state_id').textContent.trim();
highlightedStateIDs[index] = cardStateID;
const cardLink = card.querySelector('#link');
clickLink = card.querySelector('#Click-link'); // Assign clickLink here
clickLink2 = card.querySelector('#Click-link-2'); // Assign clickLink2 here
if (clickLink) {
stateLinks[cardStateID] = cardLink.textContent;
}
if (clickLink) {
stateLinks[cardStateID] = clickLink.textContent;
// Add click event listener for the dynamically generated link
clickLink.addEventListener('click', function (e) {
e.preventDefault(); // Prevent the default behavior of the link
// Handle the click event (e.g., open a new window or perform a specific action)
window.open(clickLink.getAttribute('href'), '_blank'); // Open the link in a new window
// You can customize this part based on your requirements
});
}
if (clickLink2) {
stateLinks[cardStateID + '-2'] = clickLink2.textContent; // Use a unique key for clickLink2
// Add click event listener for the dynamically generated link
clickLink2.addEventListener('click', function (e) {
e.preventDefault(); // Prevent the default behavior of the link
// Handle the click event (e.g., open a new window or perform a specific action)
window.open(clickLink2.getAttribute('href'), '_blank'); // Open the link in a new window
// You can customize this part based on your requirements
});
}
if (cardStateID === '99') {
defaultCard = card;
}
});
function showDefaultCard() {
if (defaultCard) {
defaultCard.style.display = 'block';
}
}
function hideDefaultCard() {
if (defaultCard) {
defaultCard.style.display = 'none';
}
}
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/dollimore/clspqpya9000c01re5ukl272k',
center: [-96.9902568005579, 38.521270844520316],
zoom:3.65,
dragPan: true
});
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
window.addEventListener('load', showDefaultCard);
map.on('load', () => {
map.addSource('states', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'#74E93D', // Color when hovered
'#DFE1DC' // Color
],
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
0.85, // Opacity when hovered
['match', ['get', 'STATE_ID'], highlightedStateIDs, 0.5, 0] // Opacity for highlighted and non-highlighted states
],
'fill-outline-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'black', // Change outline color when hovered
'transparent'
]
}
});
map.on('mousemove', 'state-fills', (e) => {
if (e.features.length > 0) {
if (hoveredFeatureId) {
map.setFeatureState(
{ source: 'states', id: hoveredFeatureId },
{ hover: false }
);
}
hoveredFeatureId = e.features[0].id;
map.setFeatureState(
{ source: 'states', id: hoveredFeatureId },
{ hover: highlightedStateIDs.includes(e.features[0].properties.STATE_ID) }
);
const stateID = e.features[0].properties.STATE_ID;
let isHoveringActiveState = false;
allCards.forEach(card => {
const cardStateID = card.querySelector('.collection_div .state_id').textContent.trim();
if (cardStateID === stateID) {
hideDefaultCard();
card.style.display = 'block';
isHoveringActiveState = true;
} else {
card.style.display = 'none';
}
});
if (!isHoveringActiveState) {
showDefaultCard();
}
} else {
showDefaultCard();
}
});
map.on('click', 'state-fills', (e) => {
const stateID = e.features[0].properties.STATE_ID;
// Get the cardLink for the clicked state
const cardLink = stateLinks[stateID] || '';
const cardLink2 = stateLinks[stateID + '-2'] || '';
const popupContent = `<ul class="links-map-ul">
<li><a id="popup-link" href="${cardLink}">Redirect page</a>>/li
<li><a id="popup-link" href="${cardLink2}">Redirect page</a>>/li
</ul>`;
popup.setLngLat(e.lngLat)
.setHTML(popupContent)
.addTo(map);
// Show the list content for the clicked state
const clickedStateContent = getClickedStateContent(stateID); // Implement this function to get the content for the clicked state
// Update the popup content if there is specific content for the clicked state
if (clickedStateContent) {
popup.setHTML(clickedStateContent);
}
});
// Click event listener for the map to handle clicks on the link inside the popup
map.on('click', (e) => {
const popupLink = e.originalEvent.target.id;
if (popupLink === 'popup-link') {
// Handle click inside the link (e.g., open a new window or perform a specific action)
window.open(e.originalEvent.target.href, '_blank'); // Open the link in a new window
// You can customize this part based on your requirements
}
});
map.scrollZoom.disable();
});
</script>
</body>

For another service website of the same client, they requested for a map with a functionality that, when clicked on any state, it takes the user to the respective linked page since one state corresponds to only one page.

<head>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script>
</head>
<body>
<script>
mapboxgl.accessToken = 'put your mapbox API key';.
let highlightedStateIDs = [];
let hoveredFeatureId = null;
let stateLinks = {};
let defaultCard = null;
const allCards = document.querySelectorAll('.collection-item');
allCards.forEach((card, index) => {
let cardStateID = card.querySelector('.collection_div .state_id').textContent.trim();
highlightedStateIDs[index] = cardStateID;
const cardLink = card.querySelector('#link');
if (cardLink) {
stateLinks[cardStateID] = cardLink.textContent;
}
if (cardStateID === '99') {
defaultCard = card;
}
});
function showDefaultCard() {
if (defaultCard) {
defaultCard.style.display = 'block';
}
}
function hideDefaultCard() {
if (defaultCard) {
defaultCard.style.display = 'none';
}
}
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/dollimore/clspqpya9000c01re5ukl272k',
center: [-96.9902568005579, 38.521270844520316],
zoom: 3.65,
dragPan: false
});
window.addEventListener('load', showDefaultCard);
map.on('load', () => {
map.addSource('states', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'layout': {},
'paint': {
'fill-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'#014f86', // Color when hovered
'#014f86' // Color
],
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
0.85, // Opacity when hovered
['match', ['get', 'STATE_ID'], highlightedStateIDs, 0.5, 0] // Opacity for highlighted and non-highlighted states
],
'fill-outline-color': [
'case',
['boolean', ['feature-state', 'hover'], false],
'black', // Change outline color when hovered
'transparent'
]
}
});
map.on('mousemove', 'state-fills', (e) => {
if (e.features.length > 0) {
if (hoveredFeatureId) {
map.setFeatureState(
{ source: 'states', id: hoveredFeatureId },
{ hover: false }
);
}
hoveredFeatureId = e.features[0].id;
map.setFeatureState(
{ source: 'states', id: hoveredFeatureId },
{ hover: highlightedStateIDs.includes(e.features[0].properties.STATE_ID) }
);
const stateID = e.features[0].properties.STATE_ID;
let isHoveringActiveState = false;
allCards.forEach(card => {
const cardStateID = card.querySelector('.collection_div .state_id').textContent.trim();
if (cardStateID === stateID) {
hideDefaultCard();
card.style.display = 'block';
isHoveringActiveState = true;
} else {
card.style.display = 'none';
}
});
if (!isHoveringActiveState) {
showDefaultCard();
}
} else {
showDefaultCard();
}
});
map.on('click', 'state-fills', (e) => {
const stateID = e.features[0].properties.STATE_ID;
if (stateLinks[stateID]) {
const linkUrl = stateLinks[stateID];
window.open(linkUrl, '_blank');
}
});
map.scrollZoom.disable();
map.doubleClickZoom.disable();
});
</script>
</body>

Challenges and Solutions:

Implementing the above functionality was possible but not as easy as it seemed. The unique key we mentioned previously has a crucial role in making the state active or inactive. A state with the unique key "01" will remain inactive if the key is mistakenly given as "1”. To resolve this issue, our developer went the extra mile beyond the customization as a whole.

Summary:

Today, this customizable US map feature stands as a testament to the collaborative spirit of the Webflow community. It's a perfect example of how sharing knowledge and resources can lead to innovative solutions that benefit everyone.

Download Free Organic Keywords for Moving Companies

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Description

Pricing

Webflow plans cost

Webflow has varied plans depending on your requirements.
The lowest plans start from $14 and the highest can go above $300/month for enterprise sites.

Developer cost

Most custom web-flow websites require additional HTML, and CSS code to change the appearance and this will require a developer. 
$25/hour to $150/hour depending on regions

Designer cost

The custom Webflow site will have a custom design, which will require a design.
Starts from $50/hour and upwards depending on Region

Integrations

Webflow uses integration to work with third-party data sites or apps like Zapier.
Integrations like Zapier start at $19.99/month.

Site Type

E-commerce sites are heavy, while small business sites are light.
A small custom site can range from $3500. Whereas, ecommerce sites will start from $10,000 and above
‍
Conference
‍
When
‍
Location
Sydney SEO Conference‍Mar. 1, 2024‍Sydney, Australia‍
WTSFest London‍Mar. 8, 2024‍London, UK‍
PubCon‍Mar 4-6, 2024‍Las Vegas, US‍
SMX Munich‍Mar. 12 & 13, 2024‍Munich, Germany‍
SMX Paris‍Mar. 14 & 15, 2024‍Paris, France‍
Friends of Search‍Mar. 21, 2024‍Amsterdam, Netherlands‍
SEO Mastery Summit‍Apr. 9 - 11, 2024‍Ho Chi Minh City, Vietnam‍
BrightonSEO‍Apr. 24 & 25, 2024 / Oct. 3 & 4, 2024‍Brighton, UK‍
Mozcon‍Jun. 3 & 4, 2024‍Seattle, US‍
WTSFest Berlin‍Jun. 7, 2024‍Berlin, Germany‍
LondonSEO XL‍Jun. 13, 2024‍London, UK‍
SEO on the Beach‍Jun. 14 & 15, 2024‍La Manga, Spain‍
WTSFest USA‍Sep. 19, 2024‍Philadelphia, US‍
Chiang Mai SEO Conference‍Nov 22 & 23‍Chiang Mai, Thailand‍
International Search Summit‍Nov. 14, 2024‍Barcelona, Spain‍
BrightonSEO (US edition)‍Nov. 19 & 20, 2024‍
San Diego, US
‍
‍
UPDATE SUMMARY
‍
DATE
‍
DURATION
November 2023 reviews update8 Nov 202329 days
November 2023 core update2 Nov 202325 days, 21 hours
October 2023 core update5 Oct 202313 days, 23 hours
Ranking is experiencing an ongoing issue5 Oct 202326 days
October 2023 spam update4 Oct 202315 days, 12 hours
September 2023 helpful content update14 Sep 202313 days, 11 hours
August 2023 core update22 Aug 202316 days, 3 hours
April 2023 reviews update12 Apr 202313 days, 2 hours
March 2023 core update15 Mar 202313 days, 7 hours
February 2023 product reviews update21 Feb 202314 days

Team Freshboost
Team Freshboost
Get a free SEO audit. Turn your website into a revenue engine
Audit my Website now
Signup for our blog
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Frequently asked questions

Is SEO important for eCommerce platforms?

Yes, SEO is crucial for eCommerce platforms. It enhances visibility on search engines, attracts potential customers, and improves the chances of higher conversion rates, ultimately boosting online sales.

How to increase eCommerce sales with SEO?

To boost eCommerce sales with SEO, focus on keyword optimization, create high-quality and relevant content, optimize product pages, improve website speed, utilize social media, encourage customer reviews, and invest in a mobile-friendly design.

How Is SEO for E-commerce Different?

SEO for E-commerce differs in product-focused optimization, dealing with large inventories, optimizing product pages, handling duplicate content issues, addressing seasonal fluctuations, and focusing on user experience to encourage conversions. It's a specialized approach tailored for online retail.

Which Ecommerce Platform is Best for SEO?

There is no one-size-fits-all answer. Popular platforms like Shopify, WooCommerce, and Magento offer good SEO capabilities. The best choice depends on your business needs, content management preferences, and technical expertise.

What are the benefits of SEO for eCommerce Platform?

SEO for eCommerce platforms brings increased organic traffic, higher visibility in search engine results, improved user experience, enhanced credibility, and better chances of converting leads into customers, leading to increased sales and revenue.

Frequently asked questions

Is pay-per-click advertising worth it?

PPC advertising offers targeted reach, measurable results, and fast outcomes, making it valuable for businesses. It allows precise audience targeting and provides detailed analytics for performance tracking. While it delivers quick results, it requires ongoing investment and time for management. Additionally, competitiveness in certain industries can raise costs and pose challenges.

How is ranking different when comparing PPC vs SEO?

PPC: Paid placement based on bidding and ad quality for immediate results and precise targeting.SEO: Organic ranking influenced by website quality and content relevance, takes time to build and maintain.

How Is SEO for E-commerce Different?

SEO for E-commerce differs in product-focused optimization, dealing with large inventories, optimizing product pages, handling duplicate content issues, addressing seasonal fluctuations, and focusing on user experience to encourage conversions. It's a specialized approach tailored for online retail.

How do SEO and PPC work together?

SEO and PPC complement each other by improving online visibility and driving traffic. PPC provides keyword insights for SEO, while SEO informs PPC strategies. PPC serves as a testing ground for SEO keywords, enhancing organic optimization efforts. Together, they increase SERP visibility, optimize landing pages, and improve user experience and conversions. Additionally, PPC data informs SEO content strategies, resulting in better online performance overall.

How much do PPC agencies charge?

PPC agencies offer services to assist businesses in handling their PPC campaigns, with costs typically ranging from $350 to $5,000 monthly or 12 to 30% of ad spend per month.

Frequently asked questions

What criteria should I consider when selecting an SEO agency?

When looking at how to choose an SEO agency, you’ll need to go through any available client testimonials that’ll be available in their website. Also, check if they’re transparent about their business approach to you and whether they possess a multi-disciplinary team.

How can I assess and evaluate the capabilities of an SEO agency?

When you research how to choose an SEO agency, you can evaluate their capabilities beforehand by going through their previous sample works, going through client testimonials and also going through community forums to check for reviews regarding the SEO Agency you’re looking out for.

What factors should I weigh when choosing an SEO specialist?

The factors that influence your question of how to choose an SEO agency should be to check if their portfolio is diverse, and whether they have good client testimonials, and they don’t guarantee you top ranks in Google’s search results.

What steps should I take to pick a local SEO company for my business?

Go through the company’s portfolio that is publicly available. Also, while looking for pointers on how to choose an SEO agency for your business, you can go through your local SEO agency’s client testimonials and research the company’s cultural dynamics.

Frequently asked questions

What is Plastic Surgery SEO?

Plastic surgery SEO is a specific type of search engine optimization (SEO) focused on attracting potential patients to a plastic surgeon's website. It involves various tactics to improve the website's visibility in search engine results for relevant keywords.

Why SEO for Plastic Surgeons Is Important?

SEO is an essential tool for plastic surgeons seeking to increase online visibility, rank high on SERP, attract qualified leads, and ultimately convert them into patients.

How long does it take for medical SEO to work?

Based on SEO strategies and the quality of content, initial improvements can be expected within the first three months. Achieving top positions in search results and driving traffic typically takes an average of six months.

How do you get plastic surgery leads?

Utilize 3D visualizations, Content Marketing & Webchat, patient-focused blogs, testimonials, mobile optimization, and SEO to generate plastic surgery leads.

Frequently asked questions

What is manufacturing SEO?

Manufacturing SEO involves optimizing a manufacturer's online presence to improve search engine rankings and visibility, attracting potential clients and enhancing brand awareness.

How does SEO benefit a manufacturing company?

SEO benefits manufacturing companies by increasing online visibility, attracting targeted leads, and establishing credibility, ultimately boosting brand awareness and facilitating business growth.

How can manufacturing companies improve SEO?

Manufacturing companies can enhance SEO by optimizing website content, incorporating relevant keywords, improving site speed, and utilizing quality backlinks for a stronger online presence.

How do you get plastic surgery leadsWhat is the main mistake of SEO that manufacturing companies make??

The main SEO mistake manufacturing companies make is neglecting to focus on industry-specific keywords and failing to regularly update and optimize their online content for search engines.

Related articles for you

Localization in webflow
Rive vs Lottie: The Ultimate Showdown for Animation Solutions
How to get natural backlinks? Strategies

Freshboost helps grow your business the boring but sustainable way.

COMPANY
HomePartnersContact KuwaitOman
Services
SEOWEBBaaSB2B SEO AuditWordpress
Development
MIGRATION
WordPress to WebflowWix to WebflowSquarespace to WebflowDorik to WebflowWordpress Migration
RESOURCES
BlogCase StudiesWebinars
Services
Migration
Resources

© 2024 Freshboost Co. All Rights Reserved.

freshboost-semrush-agency