https://dindoun.lautre.net/ fr SPIP - www.spip.net https://brunosanchiz.fr/local/cache-vignettes/L128xH128/favicon-68ee1.png?1762285646 https://dindoun.lautre.net/ 128 128 https://brunosanchiz.fr/spip.php?article598 https://brunosanchiz.fr/spip.php?article598 2024-08-18T12:52:32Z text/html fr bruno leaflet <p>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 : <br class='autobr' /> après avoir appelé les javascripts de leaflet, il faut : créer un `` 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 : (…)</p> - <a href="https://brunosanchiz.fr/spip.php?rubrique92" rel="directory">leaflet</a> / <a href="https://brunosanchiz.fr/spip.php?mot175" rel="tag">leaflet</a> <div class='rss_texte'><p>exemples, quick start</p> <ul class="spip" role="list"><li> <a href="https://leafletjs.com/examples/quick-start/" class="spip_url spip_out auto" rel="nofollow external">https://leafletjs.com/examples/quick-start/</a></li><li> <a href="https://leafletjs.com/reference.html" class="spip_url spip_out auto" rel="nofollow external">https://leafletjs.com/reference.html</a> <ul class="spip" role="list"><li> <a href="https://leafletjs.com/reference.html#icon" class="spip_out" rel="external">icon</a></li><li> <a href="https://leafletjs.com/reference.html#tilelayer" class="spip_out" rel="external">tilelayer</a></li><li> <a href="https://leafletjs.com/reference.html#divoverlay" class="spip_out" rel="external">divoverlay</a></li><li> <a href="https://leafletjs.com/reference.html#interactive-layer" class="spip_out" rel="external">interactive-layer</a></li><li> <a href="https://leafletjs.com/reference.html#map-event" class="spip_out" rel="external">map-event</a></li><li> <a href="https://leafletjs.com/reference.html#marker" class="spip_out" rel="external">marker</a></li><li> <a href="https://leafletjs.com/reference.html#canvas" class="spip_out" rel="external">canvas</a></li><li> <a href="https://leafletjs.com/reference.html#marker-setlatlng" class="spip_out" rel="external">marker-setlatlng</a></li><li> <a href="https://leafletjs.com/reference.html#latlng" class="spip_out" rel="external">latlng</a></li></ul></li></ul><ul class="spip" role="list"><li> importer les javascripts : <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><script src="leaflet-omnivore.min.js"></script> <script src="leaflet.js" crossorigin=""> </code></pre></div></li></ul> <p>après avoir appelé les javascripts de leaflet, il faut :</p> <ul class="spip" role="list"><li> créer un <code class='spip_code spip_code_inline' dir='ltr'><div id=map></code></li><li> lancer le javascript qui crée la map : <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>var mapbox = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'données OpenStreetMap/ODbL - rendu OSM France', minZoom: 1, maxZoom: _MaxZoom });</code></pre></div> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>var map = L.map('map', { center: new L.LatLng(lat,lon), zoom:10, layers: [mapbox] });</code></pre></div></li><li> afficher les cartes voulues <ul class="spip" role="list"><li> On l'a déjà fait avec le mapbox au dessus</li><li> <code class='spip_code spip_code_inline' dir='ltr'>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);</code></li></ul></li></ul><ul class="spip" role="list"><li> On peut ajoutes un gpx :<br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'>omnivore.gpx('gauss.gpx').addTo(map);</code></li><li> on peut ajouter une image avec une info quand on clique dessus :<br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'>const IconCentre= L.icon({ iconUrl: "image.svg", iconSize: [40, 40], });</code><br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'>const marker1 = L.marker([10,-109], {icon: IconCentre}) .bindPopup('centre[lat=10,lon=-109]') .addTo(map);</code></li></ul><ul class="spip" role="list"><li> on peut ajouter des écénements à la carte : <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>function CentreBouge(e) { ChangeContenuHtml("centre",map.getCenter()); } map.on('move', CentreBouge); </code></pre></div> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent( e.latlng.toString()) .openOn(map); } map.on('click', onMapClick); </code></pre></div> <p>texte :<br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'>var myTextLabel = L.marker([50.034255,1.30251],{icon:L.divIcon({className:"text-labels",html:"CHEVINGTON"})}).addTo(map);</code></p> </li></ul></div> https://brunosanchiz.fr/spip.php?article597 https://brunosanchiz.fr/spip.php?article597 2024-08-18T12:50:59Z text/html fr bruno leaflet <p>jeu sur les photos de Rouen les sites de plongée</p> - <a href="https://brunosanchiz.fr/spip.php?rubrique92" rel="directory">leaflet</a> / <a href="https://brunosanchiz.fr/spip.php?mot175" rel="tag">leaflet</a> <div class='rss_texte'><ul class="spip" role="list"><li> <a href="http://rouen.dindoun.lautre.net" class="spip_out" rel="external">jeu sur les photos de Rouen</a></li><li> <a href='https://brunosanchiz.fr/DIVERS/PLONGEE/index.php?ville=DIEPPE'>les sites de plongée</a></li></ul></div>