Discover the best map websites created by professional designers. Get inspired and start planning your perfect map web design today!

Watch the tutorial for this at https://www.youtube.com/watch?v=Wq5mJIHCDFo

T.RICKS Menu + Slider

ThreeSixtyEight

Watch the tutorial at https://www.youtube.com/watch?v=VqSEvzzLoVQ

CMS Map

Interactive CMS Map (Responsive - Collection List)

Recreation of the map found at  https://www.netflixshadowandbone.com/map

This cloneable is for learning purposes only. I do not own the rights to this design and content.

Draggable Map

Watch the tutorial for this map at https://www.youtube.com/watch?v=Iz_6IBfCtBQ

SVG Map

Highlight features, locations, items, etc. on images with the Webflow CMS. Multi-reference highlight items into each main gallery image item, and use a simple top and left coordinate value to set the location of the dot on the image. The structure of each highlight dot also leverages conditional visibility to adjust the position of the tooltip depending on the location of the dot in the image.

CMS Image Plotter

This project was developed using Mapbox Studio, Mapbox GL JS library and Webflow. Feel free to clone this project use it in your own way.

Charles Darwin and the Voyage of the Beagle

Charles Darwin and the Voyage of the Beagle - Interactive Map

Map CMS

Google Maps with Multiple locations and CMS

This map uses the CMS for each location and displays a popup and info card on click for each location. The items are placed using hidden a lat and long field and the rest of the information is displayed upong click. This approach does use custom JS and Jquery code found in the code editor. 

Video on how I made this:
https://youtu.be/Wd76ZwMCGzc

This site was made on top of an existing clonable by Corey Moen found here: 
https://webflow.com/made-in-webflow/website/cms-mapbox

mapbox

CMS Map with Info Card using Mapbox

A glitch on hover effect, add the class "glitch" to and div which has images inside it.

Glitch effect on hover

cayard-7cb53caed45290cc9586ec02c8402b9e

I had to make this for a project, it took a while for me to figure it out so I thought I would help the community. Feel free to copy paste my friends.

The North America pin is the pin for interactions. Have fun with it <3

Interactive World Map

Responsive Interactive World Map with Pins

Awasero

Clone this website and take advantage of a geolocation script, which fetches and displays location data for your users based on their IP addresses.

With this script, you can easily customize content and user experiences based on location, improve targeting for marketing campaigns, and gain valuable insights into user behavior. 

The script uses the GeoJS API and works asynchronously for fast loading times and seamless integration with your site. 

geolocation

Geolocation Setup for Webflow

2d map, 3d globe, and geolocation utility that you can copy to your projects, with locations added from a collection. Uses https://www.webglearth.com/ or https://leafletjs.com/

Geo Components - globes and maps and stuff for Webflow

Component: geo-components

No Code Flow

A dynamic Webflow CMS location map with pins component that we offer for the Webflow community. It works native within the CMS and no third party stuff. Easy to implement and 100%-styleable within Webflow. ✨
👋 check us out → https://www.nocodeflow.net/webflowlocationsonmap

NCF Map Styled

CMS Map with location pins – Cloneable No Code Flow component

An interactive exhibit celebrating, promoting, and preserving the idea that the history of Black American music is the story of America.

Black Music Project

This is a dark CMS map for anyone to clone, it started as a car item but I made it a random data locator. 

Make sure to follow , clone or leave a comment!

Hope this helps

Webflow CMS Map

Dark CMS Map for Webflow

This is a personal website I created to host my Lightroom Presets, Free Phone wallpapers and a Spotify Playlist which all  relate to my personal Landscape Photography Instagram account - https://www.instagram.com/the_hinterlander/

The initial loading animation can be a bit glitchy sadly, and i'm not sure why, its just very basic webflow interactions. Still, it was a very fun personal project!

There is an interactive before/after slider mechanic built purely with webflow interactions on the Lightroom Presets page. Let me know if interested in how it works.

The Hinterlander

The Hinterlander: Lightroom Presets & Phone Wallpapers

An interactive, CMS-powered map that is built using Mapbox. The collection list that populates the map must have Lattitude and Longitude coordinates for each item, and you can populate any other CMS data you want within the popups for each point. This approach does require Javascript located in the page setting body code, and if you wish to modify it be sure to check out the great Mapbox documentation and examples at https://docs.mapbox.com/mapbox-gl-js/api/.

Interactive CMS Map w/ Mapbox

Beautiful topographic maps from Switzerland – easy to embed.

source: https://map.geo.admin.ch/

Switzerland only – but worth exploring as my example shows.

Discover map websites built by the Webflow community

Discover map websites built by the Webflow community