Skip to content

Instantly share code, notes, and snippets.

@RikdeBoer

RikdeBoer/2c-Leaflet-marker-inline-svg.html

Created December 21, 2019 03:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RikdeBoer/3165b243c8418e6c1512794b07f1db8e to your computer and use it in GitHub Desktop.
Save RikdeBoer/3165b243c8418e6c1512794b07f1db8e to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet inline-SVG marker
Raw
2c-Leaflet-marker-inline-svg.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leaflet - Inline SVG marker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<style>
.mymarker svg path { fill: limegreen; }
.leaflet-popup {
margin-bottom: 60px;
}
</style>
</head>
<body>
<div id="map-placeholder" style="height:400px"></div>
<script>
const size = 50;
const iconOptions = {
iconSize : [size, size],
iconAnchor: [size/2, size - 7],
className : 'mymarker',
html : '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 10.53125 4.875 L 10.15625 5.46875 C 10.15625 5.46875 8.894531 7.410156 7.28125 9.625 C 5.667969 11.839844 3.632813 14.347656 2.4375 15.1875 L 1.9375 15.53125 L 2 16.125 L 3 25.125 L 3.09375 26 L 4 26 C 5.484375 26 7.214844 26.078125 8.9375 26.1875 L 10 26.25 L 10 18 L 12 18 L 12 26.40625 L 12.90625 26.5 C 15.734375 26.75 17.875 27 17.875 27 L 18.03125 27 L 28.96875 24.8125 L 29 24.03125 C 29 24.03125 29.089844 22.363281 29.25 20.40625 C 29.410156 18.449219 29.671875 16.148438 29.9375 15.3125 L 30.15625 14.625 L 29.625 14.21875 C 26.175781 11.546875 22.875 5.53125 22.875 5.53125 L 22.5625 4.90625 L 21.84375 5 C 21.84375 5 15.417969 5.886719 11.1875 5.03125 Z M 21.46875 7.0625 C 21.878906 7.824219 23.902344 11.441406 26.8125 14.3125 L 19.28125 15.5 C 16.816406 13.132813 14.304688 9.390625 12.9375 7.21875 C 16.808594 7.617188 20.628906 7.175781 21.46875 7.0625 Z M 10.9375 7.875 C 12.25 9.988281 15.003906 14.136719 17.90625 16.90625 C 17.25 19.582031 17.050781 23.148438 17 24.90625 C 16.332031 24.835938 15.527344 24.738281 14 24.59375 L 14 16 L 8 16 L 8 24.15625 C 6.933594 24.097656 5.898438 24.046875 4.90625 24.03125 L 4.0625 16.34375 C 5.675781 15.03125 7.402344 12.875 8.90625 10.8125 C 9.882813 9.46875 10.492188 8.550781 10.9375 7.875 Z M 27.78125 16.21875 C 27.546875 17.410156 27.367188 18.816406 27.25 20.21875 C 27.121094 21.800781 27.089844 22.667969 27.0625 23.1875 L 19.03125 24.8125 C 19.082031 23.050781 19.265625 19.71875 19.78125 17.46875 Z"/></svg>'
}
const markerOptions = {
draggable: true,
icon: L.divIcon(iconOptions)
}
const center = [-37.8178, 144.968]
const myMap = L.map('map-placeholder').setView(center, 17)
const myMarker = L.marker(center, markerOptions).addTo(myMap)
myMarker
.bindPopup('I am an inline SVG marker.<br/><br/>You can drag me too.')
.openPopup()
myMap.addLayer(L.tileLayer(
'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png',
{ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contr.' }
))
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment