docs

exemples, quick start

• https://leafletjs.com/examples/quick-start/
• https://leafletjs.com/reference.html
  • icon
  • tilelayer
  • divoverlay
  • interactive-layer
  • map-event
  • marker
  • canvas
  • marker-setlatlng
  • latlng

• importer les javascripts :

  <script src="leaflet-omnivore.min.js"></script>
  <script src="leaflet.js" crossorigin="">
  

après avoir appelé les javascripts de leaflet, il faut :

• créer un <div id=map>
• lancer le javascript qui crée la map :

  var mapbox = 	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'données OpenStreetMap/ODbL - rendu OSM France',
  minZoom: 1,
  maxZoom: _MaxZoom
  });

  var map = L.map('map', {
  center: new L.LatLng(lat,lon),
  zoom:10,
  layers: [mapbox]
  });

• afficher les cartes voulues
  • On l’a déjà fait avec le mapbox au dessus
  • var OpenSeaMap = L.tileLayer('https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {    attribution: 'Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors' }).addTo(map);

• On peut ajoutes un gpx :
  omnivore.gpx('gauss.gpx').addTo(map);
• on peut ajouter une image avec une info quand on clique dessus :
  const IconCentre= L.icon({ iconUrl: "image.svg", iconSize: [40, 40], });
const marker1 = L.marker([10,-109], {icon: IconCentre}) .bindPopup('centre[lat=10,lon=-109]') .addTo(map);

• on peut ajouter des écénements à la carte :

  function CentreBouge(e) {
     ChangeContenuHtml("centre",map.getCenter());
  }
  map.on('move', CentreBouge);
  

  var popup = L.popup();
  function onMapClick(e) {
      popup
          .setLatLng(e.latlng)
          .setContent( e.latlng.toString())
          .openOn(map);
  }
  map.on('click', onMapClick);