Leaflet offset polyline from GeoJSON
Leaflet offset polyline from GeoJSON
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://bbecquet.github.io/Leaflet.PolylineOffset/leaflet.polylineoffset.js"></script>
<div id="map"></div>
CSS
#map {
width: 600px;
height: 400px
}
JavaScript
var map = L.map('map').setView([45.73, -104.99], 5);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var myLines = [{
"type": "LineString",
"coordinates": [[-100, 40], [-105, 45], [-110, 55]]
}, {
"type": "LineString",
"coordinates": [[110, 55], [-105, 45], [-100, 40]]
}];
// Reverse lng, lat order (from GeoJSON format) to lat, lng for L.polyline
myLines.forEach(function(feature){
feature.coordinates.forEach(function(coords) {
holdLon = coords[0];
coords[0] = coords[1];
coords[1] = holdLon;
});
});
var offSet1 = L.polyline(myLines[0].coordinates, {
offset: 5,
color: 'red'
}).addTo(map);
var offSet2 = L.polyline(myLines[1].coordinates, {
offset: 5,
color: 'blue'
}).addTo(map);