index.html (693dedb) - faubourg-carte.git

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-CA">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Démonstration - Faubourg à m'lasse</title>
  <link rel="stylesheet" href="css/leaflet.css"/>
  <link rel="stylesheet" href="css/style.css"/>
  <script>
    h = window.innerHeight + "px";
    document.styleSheets[1].cssRules[1].style.height = h;
  </script>
  <script src="js/leaflet.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.name) {
      popupContent = feature.properties.name;
    }
    layer.bindPopup(popupContent);
  }

// GeoJSON
  let geojsonFeatures = {
    "features": [
      {
        "type": "Feature",
        "properties": {
          "name": "Chapelle Saint-Antoine"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -73.55089724063873,
            45.51883660822286
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "École Ville-Marie"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -73.55039164423943,
            45.51727578133604
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "name": "Asile Saint-Vincent de Paul"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            -73.55142295360565,
            45.51726544458981
          ]
        }
      }
    ]
  };

// Tuiles
  var mapbox = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>, Archives de Montréal',
      maxZoom: 20,
      id: 'mapbox/streets-v11',
      tileSize: 512,
      zoomOffset: -1,
      accessToken: 'pk.eyJ1IjoiZGF2dmFsZW50IiwiYSI6ImNrdmluZjh6cTBnYjkydXFna3lnOWRwM3oifQ.7qwZCUJ2JW2WFJ8JtDQfUg'
  });

// Couche image
  var imageUrl = 'img/plan-fond-transparent-min.png',
      imageBounds = [
        [45.5155088875666, -73.55432183482827],
        [45.52127103906887, -73.54793549518355]
      ];

// Couche plan
  var plan = L.imageOverlay(imageUrl, imageBounds, {
    opacity: 0.2
  });

// Couche commerces
  /*
  var commerce_A = L.marker([
    45.51882815111977,
    -73.55097770690918
  ]).bindPopup('Commerce A'),
  commerce_B = L.marker([45.51817273702336, -73.55133219776212]).bindPopup('Commerce B');

var commerces = L.layerGroup([
    commerce_A,
    commerce_B
  ]);
  */

// Couche GeoJSON
  var bar = L.geoJSON(geojsonFeatures, {
    // cette option ajoute le feature au layer après exécution de la fonction
    onEachFeature: onEachFeature
  });

// Couches candidates
    foo = L.marker();

try {
  // App
  var mlasse = L.map(
    'map', {
      layers: [mapbox, plan, /*commerces,*/ bar]
    }).setView([45.51823567357893, -73.55085910368373], 18);
} catch (e) {
  console.error(e);
}

// Contrôles
  var baseMaps = {
      "<span style='color: gray'>Mapbox</span>": mapbox,
  };
  var overlayMaps = {
      "<span class=\"controles\">Plan d'expropriation</span>": plan,
      "<span class=\"controles\">Institutions</span>": bar,
      "<span class=\"controles\">Carte-index des plans d’utilisation du sol de la ville de Montréal</span>": foo,
      "<span class=\"controles\">Photographies aériennes des archives</span>": foo,
      "<span class=\"controles\">Plan d'assurance</span>": foo,
  };

L.control.layers(null, overlayMaps).addTo(mlasse);

</script>
</body>
</html>

faubourg-carte.git

Ajout de l'Asile St-Vincent pour démo.