Skip to content

Instantly share code, notes, and snippets.



Last active Dec 6, 2019
What would you like to do?
leaflet.js map with marker options v1
license: mit

An example of a map presented with leaflet.js and incorperating a marker with a popup, draggability, a title and opacity.

This graph is part of the code samples for the update to the book Leaflet Tips and Tricks to version 1 of leaflet.js.

<!DOCTYPE html>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href=""
<div id="map" style="width: 600px; height: 400px"></div>
<script src=""
var map ='map').setView([-41.2858, 174.78682], 14);
mapLink =
'<a href="">OpenStreetMap</a>';
'http://{s}{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
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
.bindPopup("<b>Te Papa</b><br>Museum of New Zealand.")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment