Interactive Map on Your Web Page – with Markers – Leaflet.js and OpenStreetMap

Create an interactive map on your web page.

Using Leaflet.js, it can be a static web page on any server. With OpenStreetMap.org tiles, you can start using it without any API keys and without registration.

Includes live example.

Code of the Page

Yes, it’s just one HTML page with some JavaScript. You can see it in action in the live demo.

<!doctype html>
<html>
<head>
	<title>Map and Markers with Leaflet.js - Hello Map World - TeroKarvinen.com</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
		integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
		crossorigin=""/>
	<style>
		HTML, BODY { height: 100%; }
		#teromap {
				min-height: 150px;
				height: 100%;
			}
	</style>
</head>
<body>
	<h1>Map and Markers with Leaflet.js - Hello Map World - TeroKarvinen.com</h1>
	<p>Example Copyright 2017 Tero Karvinen <a href="http://TeroKarvinen.com">TeroKarvinen.com</a>. Map copyright OpenStreetMap contributors. Powered by Leaflet.js. </p>
	<div id="teromap"></div>

	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
		integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
		crossorigin="">
	</script>
	<script>
		var map = L.map('teromap').setView([60.2016536, 24.9342093], 13);

		L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
		}).addTo(map);

		L.marker([60.2016536, 24.9342093]).addTo(map)
			.bindPopup('See you at <a href="http://TeroKarvinen.com"">TeroKarvinen.com</a>.')
			.openPopup();

		L.marker([60.19873, 24.93342]).addTo(map)
				.bindPopup('Pasila Railway Station');

		L.marker([60.19969, 24.94877]).addTo(map)
				.bindPopup('Makelanrinne Swimming Hall');

	</script>
</body>
</html>
 

Read more

Leaflet Quick Start Guide

OpenStreetMap.org

#map on TeroKarvinen.com

This article has been updated multiple times.

/home/tee/Pictures/Map-and-Markers-with-Leaflet-js-Hello-Map-World-screenshot.png
Posted in Uncategorized | Tagged , , , , , , , , , , , , , | 1 Comment

One Response to Interactive Map on Your Web Page – with Markers – Leaflet.js and OpenStreetMap

  1. Good tips. Never heard of Leaflet before. What I’m trying to do now is create multiple zones based on zip code. I find it quite challenging.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Picks

  • Boxing Clock for AndroidOcton8 Diving T-ShirtsShaking Tower Panda Android GameLearn Chinese with Android
  • Student projects