Skip to content

Instantly share code, notes, and snippets.

@mtigas mtigas/0.txt forked from veltman/gist:6369472
Last active Dec 21, 2015

Embed
What would you like to do?
-Step 1: basic HTML skeleton for a full-screen map
-Step 2: initialize a map
-Step 3: add a tile layer
-Step 4: Add a marker
-Step 5: Add a line
-Step 6: Add a polygon
-Step 7: Styling: add a polygon with different styling
-Step 8: Click/hover
-On click, re-center map
-On hover, change styling of polygon
-Step 9: Layer groups
-Add things to a group
-Hide whole group
-Change styling for whole group
Step 10: Change map state
-Pan the map
-Set the map view

Making maps with Leaflet: A starter guide

A work-in-progress.

This is a very quick overview of how to use Leaflet.js to perform some basic mapping tasks:

  • Making a map in a webpage
  • Adding points to the map
  • Creating a "popup" information window when clicking on a point.
  • Adding lines to the map.
  • Adding shapes to the map.

1: A super basic HTML page.

Here's the plain ol' HTML page we'll use to create a map:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet!</title>
	<meta charset="utf-8" />
</head>
<body>
	<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0;
	right: 0; width: 100%; height: 100%"></div>
</body>
</html>

The only complicated part is the style element, which just makes the map tag cover the entire surface of the page.

2: Loading a map

Now, we'll throw the Leaflet CSS and Javascript into the header so it loads...

	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>

...and some simple script code to turn our full <div id="map"> tag into a real, working map.

	<script>
		var map = L.map('map').setView([-34.6094, -58.4098], 14);
		L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png').addTo(map);
	</script>

The L.map('map') part tells Leaflet to turn the map div into an interactive Leaflet map. Then, we center it on the coordinate -34.6094, -58.4098 (which is a few blocks south of where we are) and use "zoom level 14".

To actually give it a usable road map, we simply use OpenStreetMap tiles that MapQuest hosts, set it up as a tileLayer, and add it to the map we just created.


Here's what the page code should look like:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet!</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
</head>
<body>
	<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0;
	right: 0; width: 100%; height: 100%"></div>
	<script>
		var map = L.map('map').setView([-34.6094, -58.4098], 14);
		L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png').addTo(map);
	</script>
</body>
</html>

And here’s what that HTML page should look like if you open it up in your browser.
map


If we want to be a good citizen of the world, we should give credit to the OpenStreetMap project and to MapQuest for the tiles. MapQuest's documetation also tells us that they have multiple domains that serve the same tiles (so that a CDN — content-delivery network — can serve the tiles to users more quickly). So let's change the tileLayer line to this:

		L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy;<a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, Map imagery &copy;<a href="http://open.mapquest.com/" target="_blank">MapQuest</a>',
			subdomains: '1234'
		}).addTo(map);

Now our basic map page looks like this:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet!</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
</head>
<body>
	<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0;
	right: 0; width: 100%; height: 100%"></div>
	<script>
		var map = L.map('map').setView([-34.6094, -58.4098], 14);
		L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy;<a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, Map imagery &copy;<a href="http://open.mapquest.com/" target="_blank">MapQuest</a>',
			subdomains: '1234'
		}).addTo(map);
	</script>
</body>
</html>

3: Markers to show location

Now let's learn how to add markers — a visual representation of a latitude/longitude location — to our map.

Similar to how we added tileLayer object to our map, we can also add a marker:

  	L.marker([-34.60622, -58.41047]).addTo(map)
			.bindPopup("Ciudad Cultural Konex!");

Add this below where we added our tileLayer, like this:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet!</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
</head>
<body>
	<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%"></div>
	<script>
		var map = L.map('map').setView([-34.6094, -58.4098], 14);
  	L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy;<a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, Map imagery &copy;<a href="http://open.mapquest.com/" target="_blank">MapQuest</a>',
			subdomains: '1234'
		}).addTo(map);

		L.marker([-34.60622, -58.41047]).addTo(map)
			.bindPopup("Ciudad Cultural Konex!");
	</script>
</body>
</html>

Now you should have a map with a point, like this. You can even click on the point and see the "Ciudad Cultural Konex!" popup.

It should look like this:
map map


You can add as many points as you want. For example, replacing the above L.marker block with the following...

		L.marker([-34.5974, -58.3983]).addTo(map);
		L.marker([-34.6102, -58.39]).addTo(map);
		L.marker([-34.602, -58.42]).addTo(map);
		L.marker([-34.60622, -58.41047]).addTo(map);

...will get you a map that looks like
map

4: Drawing lines between points

Now we know how to start a map and put points on a map. Let's learn how to put together a map with lines.

We'll take the previous full example and replace all the L.marker lines with this:

		L.marker([-34.60622, -58.41047]).addTo(map)
			.bindPopup("Ciudad Cultural Konex!");

		L.marker([-34.6102, -58.39]).addTo(map);

		L.polyline([
			[-34.60622, -58.41047],
			[-34.6102, -58.39]
		], {color: 'red'}).addTo(map);

Instead of a simple latitude, longitude coordinate, a polyline takes several coordinates as its input, and then draws lines between them.

Here's the full HTML of the page:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet!</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
</head>
<body>
	<div id="map" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%"></div>
	<script>
		var map = L.map('map').setView([-34.6094, -58.4098], 14);
		L.tileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
			attribution: 'Map data &copy;<a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>, Map imagery &copy;<a href="http://open.mapquest.com/" target="_blank">MapQuest</a>',
			subdomains: '1234'
		}).addTo(map);

		L.marker([-34.60622, -58.41047]).addTo(map)
			.bindPopup("Ciudad Cultural Konex!");

		L.marker([-34.6102, -58.39]).addTo(map);

		L.polyline([
			[-34.60622, -58.41047],
			[-34.6102, -58.39]
		], {color: 'red'}).addTo(map);
	</script>
</body>
</html>

map

5: Drawing shapes

Similarly, L.polygon objects work like L.polyline objects, but they need a minimum of three points (so a shape is completed).

Replace the markers and polyline portions of the code with this:

		L.polygon([
			[-34.60622, -58.41047],
			[-34.6102, -58.39],
			[-34.5974, -58.3983]
		], {color: 'green'}).addTo(map);

You'll end up with something like this: map

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.