leaflet test

by Leon Alvarez Del Canto

HTML

<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/proj4js/2.0.0/proj4.js"></script>
<script src="//cdn.rawgit.com/kartena/Proj4Leaflet/0.7.0/src/proj4leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  height: 670px;
}

JavaScript

var map = L.map('map').setView([51.066953, -114.094713], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
  maxZoom: 18,
  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>',
  id: 'mapbox.streets'
}).addTo(map);

var polyline = L.polyline([
  new L.LatLng(51.07323, -114.10458),
  new L.LatLng(51.07324, -114.1063),
  new L.LatLng(51.07054, -114.10629),
  new L.LatLng(51.07054, -114.10207),
  new L.LatLng(51.06873, -114.10205),
  new L.LatLng(51.06869, -114.09712),
  new L.LatLng(51.07054, -114.09716),
  new L.LatLng(51.07227, -114.09714),
  new L.LatLng(51.07228, -114.09472),
  new L.LatLng(51.07651, -114.09478),
  new L.LatLng(51.08296, -114.09482),
  new L.LatLng(51.08296, -114.0968),
  new L.LatLng(51.08364, -114.09814),
  new L.LatLng(51.08516, -114.10083)
]).addTo(map);
var popup = L.popup()
    .setLatLng(51.08516, -114.10083)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

var popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent("You clicked the map at " + e.latlng.toString())
    .openOn(map);
}

map.on('click', onMapClick);