binjuhor

Switching from Google Maps to OpenStreetMap

Jul 22nd, 2018
539
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.14 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
  6.   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
  7. </head>
  8.  
  9. <body>
  10.   <div id="mapDiv" style="width: 800px; height: 500px"></div>
  11.   <script>
  12.     // position we will use later
  13.     var lat = 40.73;
  14.     var lon = -74.00;
  15.  
  16.     // initialize map
  17.     map = L.map('mapDiv').setView([lat, lon], 13);
  18.  
  19.     // set map tiles source
  20.     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  21.       attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
  22.       maxZoom: 18,
  23.     }).addTo(map);
  24.  
  25.     // add marker to the map
  26.     marker = L.marker([lat, lon]).addTo(map);
  27.  
  28.     // add popup to the marker
  29.     marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
  30.   </script>
  31. </body>
  32.  
  33. </html>
Add Comment
Please, Sign In to add comment