Framer meets Leaflet.JS
Hello Everyone!
Ready for some maps?
During the past month, I’ve seen a lot of buzz on the Framer Facebook Group about Framer and MapBox. Seems like a lot of people want to use maps in their prototypes to show real time map interaction instead of simple map screenshots. I too rode the same bandwagon for a a week or so and after a very bumpy ride, I finally decided to change course.
This guide will help you use interactive maps in your Framer prototypes with pure ease without running into any major issues (I say that because there are some issues that we might run into from Framer side)
We will be using a JavaScript library called leaflet.js. For web devs and code masters, this link itself should be quite straight forward as leaflet has a very self explanatory api. If you still think you can’t make it on your own, read on.
The problem with MapBox is that it offers so many things upfront which prototypers really don’t need at this level and by looking at the overwhelming MapBox Studio, we kinda feel lost in where to start. Not to mention their awesome tutorial that hasn’t been updated for a while and doesn’t work for some people. Enough complaining. Let’s do some coding.
TLDR ->
Step 1:
Make a new Framer Project. Call it leaflet_boilerplate or something similar so it can serve as a starting point for future map prototypes.
Step 2:
Open the project folder in your favorite code editor.
Step 3:
Open index.html and add the css and script tags to include the leaflet api in your project. (I know some of you might use another approach but this is how I do it to keep things simple for a simple prototype).
Step 4:
Open your project in Framer Studio or app.coffee in your code editor if you’re not on mac and make a map layer
Step 5:
Next give the map layer a class and an id (For those of you who will directly give it an id by targeting its html property will end up with the retina device pixel ratio issue which I will discuss later)
Step 6:
Finally add a map instance with the L.map method to the mapLayer by giving its id as an argument and add a tile layer from any of your favorite imagery sources (in this case map box’s free tile set Street).
Also, please try to obtain your own access token as this is for the tutorial purposes only.
Step 7:
Go here: http://leafletjs.com/examples.html
Disclaimer: This is meant to be a very quick tutorial for the Framer Community to get up and running with framer and leaflet. The rest is their imagination and framer’s potential