Skip to content

Instantly share code, notes, and snippets.

@ut

ut/.block

Last active September 9, 2021 14:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ut/09100c42bb513f0963dafd17f79c3aa4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ut/09100c42bb513f0963dafd17f79c3aa4 to your computer and use it in GitHub Desktop.
Download ZIP
Markers with curved paths in Leaflet 1
Raw
.block
license: cc-sa
Raw
README.md
Raw
Curved paths on a map 1
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
html, body { height: 100%; background-color: lightblue;}
#map {width: 100%; height: 95%; background-color: lightblue;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-curve@1.0.0/leaflet.curve.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.5, 0], 8);
var CustomIcon = L.Icon.extend({
options: {
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [-2, -20]
}
});
var color = 'darkred';
var opacity = 0.5;
var svg = "<svg height='30' width='30' xmlns='http://www.w3.org/2000/svg'><circle cx='15' cy='15' r='15' fill='"+color+"' fill-opacity='"+opacity+"' shape-rendering='geometricPrecision'></circle></svg>";
var url = encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23');
var icon = new CustomIcon({iconUrl: url});
var path = L.curve(['M',[51.23,-0.5],
'Q',[51.3,0],
[51.1,0.7],
'Q',[51.3,0.2],
[51.55,0.2],
'Q',[51.7,0.34],
[51.73,0.55]],
{color:'#555',fill:false}).addTo(map);
var pathToOL = L.curve(['M',[51.23,-0.5],
'Q',[51.7,-0.2],
[51.82, -0.6]],
{color:'#555',fill:false}).addTo(map);
var pathToMM = L.curve(['M',[51.23,-0.5],
'Q',[51.7,-0.2],
[51.55, 0.2]],
{color:'#555',fill:false, animate: {duration: 3000}}).addTo(map);
var markerUR = L.marker([51.1, 0.7], {icon: icon}).addTo(map);
var markerMM = L.marker([51.55, 0.2], {icon: icon}).addTo(map);
var markerOL = L.marker([51.82, -0.6], {icon: icon}).addTo(map);
var markerOR = L.marker([51.73, 0.55], {icon: icon}).addTo(map);
var markerUL = L.marker([51.23, -0.5], {icon: icon}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment