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

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

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

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

Clone this website if you need to pull out the user location for any use. 

Let me know if you need help with anything.

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 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

Beautiful topographic maps from Switzerland – easy to embed.

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

Switzerland only – but worth exploring as my example shows.

swiss-alps

Clone: Swiss Alps – Beautiful Map Embed

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

In July of 2019, I left Google after working in-house full time for 2years. The Remix team was my first client when I decided to go independent full time. This was the perfect partnership, because they had an internal design team who took care of all of the branding, ui, and asset creation. 

While I'm usually the one to do end-to-end design and development, it's refreshing to be able to have a design partner that can help with that side of a project. This demo link is the outcome of what we were able to put together. I took care of all of the development, both front-end and back-end in Webflow. The one area that I wish I spent more time on would be the micro-animations. 

Cheers!

Remix

remix-demo

A website for a local dry cleaning franchise. Extra scripting done for custom scroll bars, search and integrated Mapbox JS for the store locator.

Discover map websites built by the Webflow community

Discover map websites built by the Webflow community