Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta charset=utf-8 />
- <title>A sample map</title>
- <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
- <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.js'></script>
- <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.2/mapbox.css' rel='stylesheet' />
- <style>
- body { margin:0; padding:0; }
- #map { position:absolute; top:0; bottom:0; width:100%; }
- pre.ui-coordinates {
- position:absolute;
- bottom:10px;
- left:10px;
- padding:5px 10px;
- background:rgba(0,0,0,0.5);
- color:#fff;
- font-size:11px;
- line-height:18px;
- border-radius:3px;
- }
- </style>
- </head>
- <body>
- <div id='map'></div>
- <pre id='coordinates' class='ui-coordinates'></pre>
- <script>
- function ondragend() {
- var m = marker.getLatLng();
- coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
- }
- var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
- attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
- });
- var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
- var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
- var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 15, attribution: osmAttrib});
- var map = L.map('map')
- .addLayer(mapboxTiles)
- .setView([14.068928, 100.607437], 10);
- var greenIcon = L.icon({
- iconUrl: 'leaf-green.png',
- shadowUrl: 'leaf-shadow.png',
- iconSize: [38, 95], // size of the icon
- shadowSize: [50, 64], // size of the shadow
- iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
- shadowAnchor: [4, 62], // the same for the shadow
- popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
- });
- var coordinates = document.getElementById('coordinates');
- var marker = L.marker([14.07, 100.61], {icon: greenIcon, draggable: true}).addTo(map);
- marker.on('dragend', ondragend);
- ondragend();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement