The good news is that Mapbox plays really well with Webflow and there are a lot of examples of customers building with Mapbox and Webflow. Some examples:
Given Webflow is just an abstraction of HTML and CSS, it’s completely possible to build this in Webflow. Here are two potential approaches:
One option would be to sync your live data to Webflow. This would mean the data isn’t live up to the second, but you could set this to run hourly or at whatever interval works best for the team.
The advantage with this approach is that the data that’s opened in the modals would load much faster than on the current site. It looks like it’s currently making API calls on click, fetching data, and then writing it to the DOM.
With this approach, the content would already be living in the Webflow CMS and would allow your team all the power to design and build with the Designer and with less reliance on custom code.
To accomplish this, you could look at our Webflow Examples Github and the repo Populate Data into Webflow CMS. You can view the repo here:
https://github.com/Webflow-Examples/populate-data-into-webflow-cms
The code in the above repo is available under an MIT license and shows an example of loading content in the CMS. You could work off this example and set this to update existing items, create new items, and delete old items on a regular basis.
In this example, we’re loading in movies, but you could use this for your own data as well.
// make the call to Webflow to add the movie
return webflowApi
.createItem({
collectionId: "6353176f2cf2501b7755dae3",
fields: {
name: movie.title,
"movie-id": movie.id,
genres,
"movie-backdrop-poster": MOVIE_BACKDROP_PATH + movie.backdrop_path,
"movie-poster": MOVIE_IMAGE_PATH + movie.poster_path,
"release-date": movie.release_date,
"release-year": getYear(parseISO(movie.release_date), 1),
overview: movie.overview,
"vote-average": movie.vote_average,
"vote-count": movie.vote_count,
popularity: movie.popularity,
trailer: "https://www.youtube.com/watch?v=" + movie.trailerKey,
_archived: false,
_draft: false,
},
})
.then((res) => console.log(res.name))
.catch((err) => console.log(err));
The upside of this approach is that, again, it gives you the ability and power to work using the Designer, but the downside is that you’ll need to spin up a resource (Node server or similar) to run this function regularly to keep your data up to date.
If procurement is possible and security allows it, you can also use tools like Parabola or Whalesync to do this as well. If you’d like to know more about this, please let me know and I’ll dive deeper into these options. But this means you don’t need to write code or build your own Node server or infrastructure.
An additional approach to use would be to do this the exact same way you’re currently approaching it.
Use Webflow to build your page and keep the data where it currently exists. You can build the designs in Webflow and use JavaScript to fetch data and write it to the DOM when a user clicks on a location.
We do have a couple repos that walk through how to do this if you need the guidance on how this is done when you’re building with Webflow, but my guess is that since you’ve built this once you have what you need.
GitHub repos:
One of these (Fetch API and Write) shows fetching and writing to the DOM as usual. The Greenhouse Jobs example shows how you can clone an item you developed visually in the Designer, clone it, and update the content.
Either approach would work and it would allow you to re-use a lot of the work you’ve already completed on the current site.
I did mention additional tooling on the call, but I left that out since you’re using Mapbox. Reusing what already exists will allow you to move with speed and save you a lot of time with migrations, procurement, etc.
I’m happy to have additional conversations around this though if you are interested.