Next JS + Leaflet Map Tutorial

this tutorial will demonstrate how to implement a leaflet app into next Js you should be able to scroll around zoom in and out by the end of it so to begin inside your terminal you wanna create a brand new next.js app by typing in this command if you have npm you can do npm create as well I have already ran it but it will ask to name your project and it will build it for you and then once that's all done you can go inside of your project folder I called mine react leaflet and then you can open it up in a code editor and then once that's open let's do a split window and then open up a new terminal change this to one let me get bash terminal and let's start up the new server to see if our basic next JS app template works so I'll run yarn Dev and then it should be running on localhost Port 3001 and if I hit refresh we should get the generic next JS template so now that that is working let's begin installing the necessary packages needed to do the implementation so first off we will need to add leaflet which is a dependency of react leaflet which is a react wrapper around leaflet so we add both of those packages and then in the meantime we can create a new folder and call it components and then create a new map component called map and then get a couple of files prepared we will do the index.js which will be to access the map component and then the actual meat of the map component we will create a new file called map.js now that we have both of those we can do um okay let's start up our server again now that we have the packages installed and that's in our map component.js let's import a few stuff we need such as leaflet Dash leaflet.css and then we want to also import map container from react to leaflet as well as tile layer the map container will be the container for our map and then the tile layer it will actually display the map tiles that are served from openstreetmap.org which you will see later in this video and then if we do create a new function call that map and then inside of the return statement let's create the map container tag and within it let's create a tile layer tag so openstreetmaps actually provides free map tiles as it is open source as long as you provide attribution so we'll actually do something like that and then paste that in and it's basically a URL to where they host all the map tiles and it will display that into our react leaflet component and then within map container we'll do Center to create the center of the map when it loads and then it takes an latitude and long longitude coordinate so we'll just do the 52 505 and then negative 0.09 and then the initial Zoom value and then we can just set that to 13. and then there's also another characteristic that you can change called scroll wheel zoom and then this is if you want to be able to scroll in and out of your map with the mouse wheel so we'll set that as true for now and then let's inside of the pages.index let's import our our map component so we'll do import map and then right under right above the div right here let's place in our map component so right here we'll just type in map and then see what happens hit refresh and you see that it says window is not defined and that is because um right now it is trying to do server-side rendering and the window I guess object does not ex exist in the server side so what we have to actually do is disable server-side rendering for our map component so next JS has a handy way of doing that we can just import Dynamic inside of the index of our map component and then import that from next.js and then create a new variable const map set it equal to Dynamic dynamic uh did I spell that right I think I did and then we want to import map component uh import map comma and then we want to disable server-side rendering for this map component so we'll set it to fauth and then export it out so instead of um calling this map component directly we'll just call this one and then it should take the index of the map component folder and disable server-side rendering for the component so if we do that instead we just do the map folder it should automatically take the index and if we hit refresh we will see that we don't get the error anymore and that's because it's working it the map is there it's just we haven't applied any CSS to it so it's probably just really tiny and we need to make it bigger so what we can do is let's import we can import styles so if we can find that folder Styles Dash home Dot module.css and it should be somewhere here yes this one and we can add some CSS for the map component so let's call this home map or just call it map I guess and then we could set the width set the width width to uh a hundred percent and then we can set the oops set the height to 40 REM so let's apply this to our map component up here we will right here we'll add a class name make it equal to or let's import Styles as or that exactly important import Style oh that's python let's import style from I can't type there import style from and then what we can do is pass in style and then take the map and then if we hit refresh we should get the map to appear and for some reason it is in the wrong place so let's head back over to index.js take that put it outside of the div paste it back in and then look at that you should be able to zoom in and out and pan left and right up and down and yeah that's essentially how to add the leaflet map into next Js you can play around with the different uh public apis the different components have such as the zoom you can change the zoom so if you save that and hit refresh it'll zoom out more but if you put a higher number like 15 hit refresh it zooms in really close so you can make it dynamic in that matter you can also change the center so put different latitude and longitude values and then that's how you Center the map in different locations like right now we are in Africa and then you can set this to false and now or hit refresh after now Zoom is disabled as you can see so you can just force users to use the plus or minus Zoom or I think double click Zoom is enabled but there is an API to disable that as well is all in the react leaflet documentation but other than that yeah that's the tutorial in the future I'm planning to create another tutorial on how to have your own layers and adding geojson other tile layers so comment below what kind of other tutorials in next JS and react weekly you want to see

Channel: halfword

Views: 13,625

Keywords:

Id: Ody2U-fJ580

Length: 12min 30sec (750 seconds)

Published: Wed Sep 21 2022