Last active
June 22, 2023 18:20
-
-
Save sooryansatheesh/20100d641fb508b7a8a0e3e8048111e3 to your computer and use it in GitHub Desktop.
Leaflet map
This file contains hidden or 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> | |
| <title>Leaflet Map with Marker</title> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css" /> | |
| <style> | |
| #map { | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div> | |
| <label for="latitude">Latitude:</label> | |
| <input type="text" id="latitude" /> | |
| <br /> | |
| <label for="longitude">Longitude:</label> | |
| <input type="text" id="longitude" /> | |
| <br /> | |
| <button onclick="updateMap()">Submit</button> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script> | |
| <script> | |
| var map; | |
| var marker; | |
| function updateMap() { | |
| var latitude = parseFloat(document.getElementById("latitude").value); | |
| var longitude = parseFloat(document.getElementById("longitude").value); | |
| if (isNaN(latitude) || isNaN(longitude)) { | |
| alert("Invalid latitude or longitude!"); | |
| return; | |
| } | |
| if (latitude < -180 || latitude > 180 || longitude < -180 || longitude > 180) { | |
| alert("Latitude and longitude values must be between -180 and 180!"); | |
| return; | |
| } | |
| if (map && marker) { | |
| map.removeLayer(marker); | |
| } | |
| map = L.map('map').setView([latitude, longitude], 12); | |
| // OSM layer | |
| var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors', | |
| maxZoom: 18, | |
| }).addTo(map); | |
| // Marker with popup | |
| marker = L.marker([latitude, longitude]).addTo(map); | |
| marker.bindPopup("Latitude: " + latitude + "<br/>Longitude: " + longitude).openPopup(); | |
| // Layer control | |
| var baseLayers = { | |
| 'OpenStreetMap': osmLayer | |
| }; | |
| L.control.layers(baseLayers).addTo(map); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment