An example of a map presented with leaflet.js and incorperating a marker with a popup, draggability, a title and opacity.
leaflet.js map with marker options
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Marker Leaflet Map</title> | |
| <meta charset="utf-8" /> | |
| <link | |
| rel="stylesheet" | |
| href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" | |
| /> | |
| </head> | |
| <body> | |
| <div id="map" style="width: 600px; height: 400px"></div> | |
| <script | |
| src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> | |
| </script> | |
| <script> | |
| var map = L.map('map').setView([-41.2858, 174.78682], 14); | |
| mapLink = | |
| '<a href="http://openstreetmap.org">OpenStreetMap</a>'; | |
| L.tileLayer( | |
| 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© ' + mapLink + ' Contributors', | |
| maxZoom: 18, | |
| }).addTo(map); | |
| var marker = L.marker([-41.29042, 174.78219], | |
| {draggable: true, // Make the icon dragable | |
| title: 'Hover Text', // Add a title | |
| opacity: 0.5} // Adjust the opacity | |
| ) | |
| .addTo(map) | |
| .bindPopup("<b>Te Papa</b><br>Museum of New Zealand.") | |
| .openPopup(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment