Geographic Information Systems Asked by Vvid on September 14, 2020
I need to animate a River Path using "Encoded Polyline".
I created two HTMLs from website examples. They both work.
How do I merge HTML 2 into HTML 1, so that the animation accepts "Encoded Polyline".
I am not a programmer, unfamiliar with Javascript function syntax, so I am struggling to do this…
Any help is appreciated.
HTML 1 – Static River (using Encoded Polyline)
<!DOCTYPE html>
<html>
<head>
<title>Leaflet L.Polyline.fromEncoded()</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 600px"></div>
<script src="Polyline.encoded.js"></script>
<script>
var map = new L.Map('map');
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}
).addTo(map);
var encoded = 'aquEva`cL}{i@wvfFsqGqihCdv_CcldEpia@qihChdP{v_CpqnBoqnBf|i@qabDpv_CoihCrpnBe|pCtj}AqytA|cP}flAm`{@}~eBqvXel}AxawBgdwBxmnBctjDrcPgdwBg_{@{~eBercAqihCwmr@qqnB?qqnBh{i@{flA?qihCg`{@gl}Acnr@e|pCw{i@e|pCwpnBedwB';
var polyline = L.Polyline.fromEncoded(encoded).addTo(map);
map.fitBounds(polyline.getBounds());
</script>
</body>
</html>
HTML 2 – Animated River using co-ordinates
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id=map></div>
<script>
mapboxgl.accessToken =
"pk.eyJ1IjoiaHllb25namlua2ltIiwiYSI6ImNpZXh4dXp5eDA2YjFzaGtyOGR2dnBza2oifQ.a5K673tSr0cOcYoX1rpPhg";
var animationStep = 50;
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-68.81835937500001,1.],
zoom: 4
});
function enableLineAnimation(layerId) {
var step = 0;
let dashArraySeq = [
[0, 4, 3],
[1, 4, 2],
[2, 4, 1],
[3, 4, 0],
[0, 1, 3, 3],
[0, 2, 3, 2],
[0, 3, 3, 1]
];
setInterval(() => {
step = (step + 1) % dashArraySeq.length;
map.setPaintProperty(layerId, 'line-dasharray', dashArraySeq[step]);
}, animationStep);
}
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"name": "",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature",
"properties": {
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
-68.81835937500001,
1.098565496040652
],
[
-67.63183593750001,
1.3182430568620136
],
[
-66.92871093750001,
1.3621763466641712
],
[
-65.91796875000001,
0.7031073524364909
],
[
-65.21484375000001,
0.5273363048115169
],
[
-64.55566406250001,
0.4394488164139768
],
[
-63.98437500000001,
-0.13183582116662096
],
[
-63.14941406250001,
-0.3515602939922709
],
[
-62.44628906250001,
-1.0106897682409002
],
[
-61.69921875000001,
-1.5818302639606454
],
[
-61.25976562500001,
-2.064982495867104
],
[
-60.86425781250001,
-2.152813583128846
],
[
-60.33691406250001,
-1.845383988573187
],
[
-59.85351562500001,
-1.7136116598836224
],
[
-59.23828125000001,
-2.3284603685731593
],
[
-58.35937500000001,
-2.8991526985043006
],
[
-57.74414062500001,
-2.986927393334863
],
[
-57.21679687500001,
-2.67968661580376
],
[
-56.51367187500001,
-2.3284603685731593
],
[
-55.94238281250001,
-2.064982495867104
],
[
-55.37109375000001,
-2.064982495867104
],
[
-54.97558593750001,
-2.284550660236957
],
[
-54.27246093750001,
-2.284550660236957
],
[
-53.78906250000001,
-1.9771465537125645
],
[
-53.04199218750001,
-1.7136116598836224
],
[
-52.29492187500001,
-1.4939713066293112
],
[
-51.67968750000001,
-0.9228116626856938
]
]
]
}
}
]
}
},
"layout": {
},
"paint": {
"line-color": "#FF0000",
"line-width": 8,
"line-dasharray": [0, 4, 3]
}
});
enableLineAnimation('route');
});
</script>
</body>
</html>
P.S – Just in case you want to run HTML 1 locally, there is a JS file that needs to be available in the working folder, called "Polyline.encoded.js". It can be downloaded from the following site:
https://gist.github.com/jieter/7689228
or directly
or add the following script into the HTML 1 code
/*
* L.PolylineUtil contains utilify functions for polylines, two methods
* are added to the L.Polyline object to support creation of polylines
* from an encoded string and converting existing polylines to an
* encoded string.
*
* - L.Polyline.fromEncoded(encoded [, options]) returns a L.Polyline
* - L.Polyline.encodePath() returns a string
*
* Actual code from:
* http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/
*/
(function () {
'use strict';
/* jshint bitwise:false */
// This function is very similar to Google's, but I added
// some stuff to deal with the double slash issue.
var encodeNumber = function (num) {
var encodeString = '';
var nextValue, finalValue;
while (num >= 0x20) {
nextValue = (0x20 | (num & 0x1f)) + 63;
encodeString += (String.fromCharCode(nextValue));
num >>= 5;
}
finalValue = num + 63;
encodeString += (String.fromCharCode(finalValue));
return encodeString;
};
// This one is Google's verbatim.
var encodeSignedNumber = function (num) {
var sgn_num = num << 1;
if (num < 0) {
sgn_num = ~(sgn_num);
}
return encodeNumber(sgn_num);
};
var getLat = function (latlng) {
if (latlng.lat) {
return latlng.lat;
} else {
return latlng[0];
}
};
var getLng = function (latlng) {
if (latlng.lng) {
return latlng.lng;
} else {
return latlng[1];
}
};
var PolylineUtil = {
encode: function (latlngs, precision) {
var i, dlat, dlng;
var plat = 0;
var plng = 0;
var encoded_points = '';
precision = Math.pow(10, precision || 5);
for (i = 0; i < latlngs.length; i++) {
var lat = getLat(latlngs[i]);
var lng = getLng(latlngs[i]);
var latFloored = Math.floor(lat * precision);
var lngFloored = Math.floor(lng * precision);
dlat = latFloored - plat;
dlng = lngFloored - plng;
plat = latFloored;
plng = lngFloored;
encoded_points += encodeSignedNumber(dlat) + encodeSignedNumber(dlng);
}
return encoded_points;
},
decode: function (encoded, precision) {
var len = encoded.length;
var index = 0;
var latlngs = [];
var lat = 0;
var lng = 0;
precision = Math.pow(10, -(precision || 5));
while (index < len) {
var b;
var shift = 0;
var result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
} while (b >= 0x20);
var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
lat += dlat;
shift = 0;
result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 0x1f) << shift;
shift += 5;
} while (b >= 0x20);
var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
lng += dlng;
latlngs.push([lat * precision, lng * precision]);
}
return latlngs;
}
};
/* jshint bitwise:true */
// Export Node module
if (typeof module === 'object' && typeof module.exports === 'object') {
module.exports = PolylineUtil;
}
// Inject functionality into Leaflet
if (typeof L === 'object') {
if (!(L.Polyline.prototype.fromEncoded)) {
L.Polyline.fromEncoded = function (encoded, options) {
return new L.Polyline(PolylineUtil.decode(encoded), options);
};
}
if (!(L.Polygon.prototype.fromEncoded)) {
L.Polygon.fromEncoded = function (encoded, options) {
return new L.Polygon(PolylineUtil.decode(encoded), options);
};
}
var encodeMixin = {
encodePath: function () {
return PolylineUtil.encode(this.getLatLngs());
}
};
if (!L.Polyline.prototype.encodePath) {
L.Polyline.include(encodeMixin);
}
if (!L.Polygon.prototype.encodePath) {
L.Polygon.include(encodeMixin);
}
L.PolylineUtil = PolylineUtil;
}
})();
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP