leaflet test

In this example below you will see how to do a leaflet test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jason_, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jason_ ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>leaflet test</title>
  
  
  <link rel='stylesheet prefetch' href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   <div id="mapid"></div>
  <script src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jason_/leaflet-test-QQNmZp */
#mapid { height: 480px; }

/*Downloaded from https://www.codeseek.co/Jason_/leaflet-test-QQNmZp */
var mymap = L.map('mapid').setView([43.761539, -79.411079], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiamFzb24tYyIsImEiOiJjamQ5N2x0NWM2YmRrMzNvMXRraHllNWxlIn0.jE7PwynjVblGOUusGQF2Pg', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiamFzb24tYyIsImEiOiJjamQ5N2x0NWM2YmRrMzNvMXRraHllNWxlIn0.jE7PwynjVblGOUusGQF2Pg'
}).addTo(mymap);

//var marker = L.marker([43.6532, 79.3832]).addTo(mymap);
//marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();


var popup = L.popup()
    .setLatLng([43.6532, -79.3832])
    .setContent("I am a standalone popup.")
    .openOn(mymap);

Comments