Simple maps based on Leaflet and OpenStreetMap for your website

This small tutorial will help you add simple maps based on open source data for your website. Map solution is based on Leaffet JS library and OpenStreetMap.org.

Definition of Leaflet from its official page:

Definition of OpenStreetMap.org from their about:

I’m developing hosting website with map in a category. I was looking for a simple map solution with these features:

  • good looking map layer

  • center map to particular country

  • ability to set zoom level

  • marker placed under capital city

  • custom icon marker

**What you will need**
  • latitudes and longitudes (countries + capitals)

  • download Leaflet JS library and add to the source or use available CDN:


<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 

Place this map code into your website

Special meta tag in section:

 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

and this code in section:

<p id="map2" style="width: 300px; height: 250px"></p> 
<script> 
        var map = L.map('map2', {scrollWheelZoom: false, tap: false}).setView([51.165691,10.451526], 5); 
        L.tileLayer('https:/{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', { 
            maxZoom: 18, 
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>', 
            id: 'examples.map-i86knfo3' 
        }).addTo(map); 
        L.marker([<?php print $fields[52.520007,13.404954]).addTo(map) 
</script> 

Short code explanation

  • FALSE value of scrollWheelZoom and tap disable map zooming by mouse scroll and simple tablet touch

  • 51.165691,10.451526 are coordinates of map center

  • 5 is zoom level

  • attribution sets credits for map data in right bottom map corner

  • 52.520007,13.404954 are coordinates of marker

  • you can use your own marker icon by placing this additional code into JS

That’s it. Fast and simple maps based on OpenStreetMap data. You can find demo here and life example here.

Source of tutorial. If you have any question, contact me using my homepage.