Free embedded map API for web

Posted on
OpenStreetMap Krakow

Google Maps Alternative

Ever since Google stopped offering free embedded map service, Open Street Map project continues on gaining popularity as one truly independent and free platform for cartography and geolocation data. Thanks to the user-generated content model (like Wikipedia) and Open Data Commons Open Database Licencing it is crazy accurate and can be used by anyone, as long as you credit OpenStreetMap and its contributors. But if you alter or build upon OSM data, you may distribute the result only under the same licence.

Embedded map on your site

While OSM provides data, there are many different projects around, that allows you to embed a simple map on a web page or in an application. No API keys, no complicated pricing policy. One of the easiest ways to have your own interactive map is to use the leaflet – an open-source JavaScript library.

OSM Leaflet React API sample

Even simpler is to use is a react-leaflet, which wraps around the JS library and provides the <Map> component which is directly rendered, with just 3 lines of configuration. Although it also provides a vast variety of options, if needed.

<Map center={[50.0617, 19.9373]} zoom={13}>
	<TileLayer
	  attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
	/>
</Map>

In order to make it all work, you also need the leaflet library and CSS linked, as well as .leaflet-container CSS class with rigidly defined height.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
	.leaflet-container {
	  height: 300px;
	  width: 80%;
	  margin: 0 auto;
	}
</style>

Embed map tutorials and resources

OpenStreetMap Krakow