karte-einbinden-mit-geodten-ausleen.php
Quell Code
<!doctype html> <html lang="de"> <head> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; } </style> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <script src="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js"></script> <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css"> <title>Text-Datei in HTML</title> <style> *{ margin:0; padding:0; } #map{ border:1px solid black; } #map{ width:100vw; height:100vh; } path:hover { fill: green; stroke-width: 15; dd; stroke: blue; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map'); function onLocationFound(e) { var current_position, current_accuracy; L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', id: 'mapbox.streets' }).addTo(map); if (current_position) { map.removeLayer(current_position); map.removeLayer(current_accuracy); } var radius = e.accuracy / 2; current_position = L.marker(e.latlng).addTo(map) .bindPopup("You are within " + radius + " meters from this point").openPopup(); current_accuracy = L.circle(e.latlng, radius).addTo(map); } function onLocationError(e) { lat='52.2900'; lng='8.9400'; zoom=12; map.setView([lat, lng], zoom); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { maxZoom: 18, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', id: 'mapbox.streets' }).addTo(map); L.marker([lat, lng], zoom); current_accuracy = L.circle([lat, lng], 1500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map).bindPopup(map).bindPopup("<b>Minden</b><br />lat "+lat+"<br>ing "+lng+" <br>").openPopup(); } map.on('locationfound', onLocationFound); map.on('locationerror', onLocationError); function locate() { map.locate({ setView: true, maxZoom: 16 }); } // call locate every 3 seconds... forever //setInterval(locate, 3000); locate(); </script> </body> </html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett