Created
February 26, 2020 11:07
-
-
Save manutheblacker/402954a575d79b62a569527762e05059 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/kibuxemepe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" | |
| integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" | |
| crossorigin=""/> | |
| <style id="jsbin-css"> | |
| #map { height: 180px; } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://code.jquery.com/jquery-3.0.0.js"></script> | |
| <div id="map"></div> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" | |
| integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" | |
| crossorigin=""></script> | |
| <script id="jsbin-javascript"> | |
| $(document).ready(function(){ | |
| var map, marker, controls, lat, lon, zoom; | |
| // set up the map | |
| map = L.map('map'); | |
| // create the tile layer with correct attribution | |
| var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; | |
| var osmLayer = new L.TileLayer(osmUrl, { | |
| minZoom: 4, | |
| maxZoom: 16, | |
| attribution: osmAttrib | |
| }); | |
| L.control.zoom({ | |
| position: 'topleft' | |
| }).addTo(map); | |
| // start the map in East Anglia | |
| /*Starting Location 52.2742, -0.0068758*/ | |
| lat = 6.3612547; | |
| lon = 2.4340824; | |
| zoom = 23; | |
| map.setView(new L.LatLng(lat, lon), zoom); | |
| map.addLayer(osmLayer); | |
| /*this function gets called when the button is clicked*/ | |
| function findMeClick() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| lat = position.coords.latitude; | |
| lon = position.coords.longitude; | |
| // create custom marker icon | |
| var starMarkerIcon = L.icon({ | |
| iconUrl: 'https://www.dropbox.com/s/odq20c47cv0jdtx/map-pin-default.svg?raw=1', | |
| iconSize: [50, 50], // size of the icon | |
| }); | |
| // centre the the map to coords and zoom in | |
| map.setView(["6.3612547", "2.4340824"], 14); | |
| // place a marker at those coords | |
| marker = L.marker(["6.3612547", "2.4340824"], { | |
| icon: starMarkerIcon | |
| }).addTo(map); | |
| document.getElementById("showlat").firstChild.innerHTML = Math.round(lat * 1000000) / 1000000; | |
| document.getElementById("showlon").firstChild.innerHTML = Math.round(lon * 1000000) / 1000000; | |
| }) | |
| } else { | |
| document.getElementById("showlat").firstChild.innerHTML = "unknown"; | |
| document.getElementById("showlon").firstChild.innerHTML = "unknown"; | |
| alert("geolocation not supported here"); | |
| } | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">#map { height: 180px; }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){ | |
| var map, marker, controls, lat, lon, zoom; | |
| // set up the map | |
| map = L.map('map'); | |
| // create the tile layer with correct attribution | |
| var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; | |
| var osmLayer = new L.TileLayer(osmUrl, { | |
| minZoom: 4, | |
| maxZoom: 16, | |
| attribution: osmAttrib | |
| }); | |
| L.control.zoom({ | |
| position: 'topleft' | |
| }).addTo(map); | |
| // start the map in East Anglia | |
| /*Starting Location 52.2742, -0.0068758*/ | |
| lat = 6.3612547; | |
| lon = 2.4340824; | |
| zoom = 23; | |
| map.setView(new L.LatLng(lat, lon), zoom); | |
| map.addLayer(osmLayer); | |
| /*this function gets called when the button is clicked*/ | |
| function findMeClick() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| lat = position.coords.latitude; | |
| lon = position.coords.longitude; | |
| // create custom marker icon | |
| var starMarkerIcon = L.icon({ | |
| iconUrl: 'https://www.dropbox.com/s/odq20c47cv0jdtx/map-pin-default.svg?raw=1', | |
| iconSize: [50, 50], // size of the icon | |
| }); | |
| // centre the the map to coords and zoom in | |
| map.setView(["6.3612547", "2.4340824"], 14); | |
| // place a marker at those coords | |
| marker = L.marker(["6.3612547", "2.4340824"], { | |
| icon: starMarkerIcon | |
| }).addTo(map); | |
| document.getElementById("showlat").firstChild.innerHTML = Math.round(lat * 1000000) / 1000000; | |
| document.getElementById("showlon").firstChild.innerHTML = Math.round(lon * 1000000) / 1000000; | |
| }) | |
| } else { | |
| document.getElementById("showlat").firstChild.innerHTML = "unknown"; | |
| document.getElementById("showlon").firstChild.innerHTML = "unknown"; | |
| alert("geolocation not supported here"); | |
| } | |
| } | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #map { height: 180px; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| var map, marker, controls, lat, lon, zoom; | |
| // set up the map | |
| map = L.map('map'); | |
| // create the tile layer with correct attribution | |
| var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; | |
| var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'; | |
| var osmLayer = new L.TileLayer(osmUrl, { | |
| minZoom: 4, | |
| maxZoom: 16, | |
| attribution: osmAttrib | |
| }); | |
| L.control.zoom({ | |
| position: 'topleft' | |
| }).addTo(map); | |
| // start the map in East Anglia | |
| /*Starting Location 52.2742, -0.0068758*/ | |
| lat = 6.3612547; | |
| lon = 2.4340824; | |
| zoom = 23; | |
| map.setView(new L.LatLng(lat, lon), zoom); | |
| map.addLayer(osmLayer); | |
| /*this function gets called when the button is clicked*/ | |
| function findMeClick() { | |
| if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| lat = position.coords.latitude; | |
| lon = position.coords.longitude; | |
| // create custom marker icon | |
| var starMarkerIcon = L.icon({ | |
| iconUrl: 'https://www.dropbox.com/s/odq20c47cv0jdtx/map-pin-default.svg?raw=1', | |
| iconSize: [50, 50], // size of the icon | |
| }); | |
| // centre the the map to coords and zoom in | |
| map.setView(["6.3612547", "2.4340824"], 14); | |
| // place a marker at those coords | |
| marker = L.marker(["6.3612547", "2.4340824"], { | |
| icon: starMarkerIcon | |
| }).addTo(map); | |
| document.getElementById("showlat").firstChild.innerHTML = Math.round(lat * 1000000) / 1000000; | |
| document.getElementById("showlon").firstChild.innerHTML = Math.round(lon * 1000000) / 1000000; | |
| }) | |
| } else { | |
| document.getElementById("showlat").firstChild.innerHTML = "unknown"; | |
| document.getElementById("showlon").firstChild.innerHTML = "unknown"; | |
| alert("geolocation not supported here"); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Integration d'un model de localisation dans le genre google maps ou airbnb avec openstreetmaps et leaflet.js