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