How to Make a Map Using Leaflet

Part 1 of 2:

Setting Up the Map

Open or create your webpage. If you don't already have a webpage you want to insert the map into, you can use the following HTML5 template; save it as 'map_page.html' :
```
 <html lang="en"> <head> <meta charset="utf-8"> <title>My Leaflet Maptitle> head> <body>  body> html> 
```
Include the Leaflet JavaScript and CSS files. Your webpage will need to include the Leaflet JavaScript file and CSS file. To do this, paste the following line of code into your HTML file, inside the area, on a new line below the :
```
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js">script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> 
```
Add an HTML map container. Leaflet will display the map inside an HTML element, so you need to provide one for it. Paste the following line of markup inside the :
```
<div id="map">div> 
```
Style the map container. You need to set how large the map will be when it is displayed, and you should use CSS to do this. You can add the following to the document :
```
<style> #map { height: 500px; width: 700px; } style> 
```
Create the map object. To start writing the JavaScript code that sets up the map, you'll need to add a area to the after the map container div. Also inside of this, you can create the map object by calling the map() function of the leaflet object, like this:
```
<script type='text/javascript'> var map = L.map('map'); </script> 
```
Set the map's view. A Leaflet map's view property is what manages what part of of the map you see. Set your map's view to center on the coordinates [0, 0] (off the coast of central Africa):
```
map.setView([0, 0], 2); 
```
Add a tile layer. Leaflet maps have layers which are stacked on top of one another, and are what you actually see in a map. There are several types of layers: UI (markers and popups), Raster (tile layers), Vector (shapes), and Other. Tile layers are are the standard 'base' layers, and can come from map providers like Google Maps, MapQuest, or OpenStreetMaps. Each layer has a urlTemplate, which tells Leaflet where the layer information is coming from. You should also provide attribution information to tell visitors where the map tiles are from.
```
var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }); layer.addTo(map); 
```

Part 2 of 2:

Adding Additional Layers and Features

Add a marker. Markers show the location of a point on a map. In Leaflet, markers are a type of 'UI layer', so they can be directly added to maps. Simply copy the following line of code into your element:.
```
var marker = L.marker([20, 20]); marker.addTo(map); 
```
Add a popup. Popups are used to add contextual information to a marker or other layer.
```
marker.bindPopup('Chad'); marker.openPopup(); 
```
Add a polyline. In Leaflet, a polyline is a line with multiple segments, and is a type of 'vector layer'.
```
var polyline = L.polyline([ [20, 10], [10, 20], [20, 30] ]) polyline.addTo(map); 
```
Set the style of a vector layer. Styles determine what the vector looks like, and include line colour, line style, fill colour, opacity, and so on. Different style options apply to different types of vectors; for instance, a polyline has no area, so the fill options don't apply.
```
polyline.setStyle({ color: 'red' }); 
```
Add a scale control. Controls let you interact with the map in various ways, or show additional information about the map. A scale control displays how large distances are on the map, which changes when the map is zoomed.
```
var scale = L.control.scale() scale.addTo(map); 
```
Review the finished map.

Marvin Fry

Update 05 March 2020

You should read it

May be interested

How to make HD video with low capacity?
you are looking to make hd quality videos for uploading to youtube or simply to save them to your computer later. however, you are afraid of the large amount of video will make the upload process slow or take up a lot of computer memory. therefore, we will show you how to make hd quality videos with low capacity in the article below. please consult.
Summary of simple ways to make flan at home
the following article will summarize how to make simple flan cakes at home so that housewives can have the courage to show their talents in front of family, lovers, friends!
6 How to prepare delicious oats for the elderly and the sick
the following article, tipsmake.com would like to introduce you 6 ways to make delicious, nutritious bird's nest for the elderly and the sick.
A guide to making delicious and beautiful chocolates at home
here's how to make chocolate both simple and economical! try one of the following two methods to make your own beautiful chocolate candy at home!
Ways to make smart mouse traps with simple household items
domestic insects and rodents not only cause economic losses but also cause the spread of many dangerous diseases. how to kill rats without harm or cost too much? please refer to a few ways to make smart mouse traps from simple household items below! surely the cousins will be terrified.
Minecraft medicine recipe, how to make Minecraft medicine
apparently players can make themselves a 'doctor' in minecraft by learning about potion recipes that can help you avoid danger or give you an advantage in certain situations.
How to make Vietcombank Online card
now, you can make vietcombank online card quickly and easily via this bank's website. with just a few simple steps as instructed below, you will have a convenient vietcombank atm card right away.
4 ways to make delicious cucumber salad
cucumber salad is a delicious dish, easy to eat on hot days. here are 4 ways to make delicious cucumber salad, simple not only delicious but also help to lose weight, beautiful skin, please refer.
How to make delicious meat stock ship
braised pork with rich flavor, greasy, fragrant quail eggs, thick viscous water to eat very rice, especially in the cold season. the following article will guide you how to cook delicious warehouse meat stock, right.
Things that can make you look older than your actual age
aging is inevitable, but there are certain habits that can speed up the process without you even realizing it.

How to Make a Map Using Leaflet

Setting Up the Map

Adding Additional Layers and Features

You should read it

May be interested

Application