Leaflet Quickstart

by chk1

HTML

<script src="https://cdn.rawgit.com/SpatialServer/Leaflet.MapboxVectorTile/master/dist/Leaflet.MapboxVectorTile.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<div id='map'></div>
Your location: <input type="text" id="userlocation">

CSS

body { margin:0; padding:0; }
#map { height:300px; width:100%; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 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);

map.on('click', function(e){
	console.log(e);
	L.marker(e.latlng).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();
    
  document.getElementById('userlocation').value = e.latlng.lat+','+e.latlng.lng;
})