Hi ๐ !
Thank you for your feedback from my last post !
https://dev.to/simerca/mobile-ios-android-app-with-vuejs-in-5-minutes-really-52n5
Take 1 minutes to like this too, and share me your feedback in the comments section !
So !
Do you want to display 14000+ Polylines inside your browser without make your CPU launch on the moon ?
Liftoff !
Start a blank VueJs project where you want
vue create app
next, install Leaflet packages and Vue2-Leaflet
npm install leaflet
npm install vue2-leaflet
Ok we can start
the first step is to initialise Map inside a component
<template>
<div>
<l-map
:zoom="zoom"
:center="center"
:options="mapOptions"
style="height: 100vh"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
</l-map>
</div>
</template>
<script>
import { LMap, LTileLayer } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css'
export default {
components:{
LMap,
LTileLayer,
},
data(){
return {
zoom: 8,
center: [44.8, -0.6],
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
mapOptions: {
zoomSnap: 0.5
}
}
}
}
</script>
This is the simple thing !
Now...
Did you know HERE ?
Here is for me, the best provider of map's datas, I invite you to view they documentation here:
https://developper.here.com
And they have create a little algorithm to encode/decode Polyline, the benefit of this thing it's how fast it will be decoded.
for exemples I have create a multiple polylines with lots of bounds, about 14000+.
HERE encode this on a simple string like this:
https://gitlab.com/-/snippets/2020388
this file is very light, 58 ko !!!
so import this script inside a folder like
src/assets/flexiblepolyline.js
https://gitlab.com/-/snippets/2020385
and import it inside your components
import H from '../assets/js/flexiblepolyline.js'
get the exemple file of datas.json and import it too
import datas from '../assets/datas.json';
Now lets started to create the Polyline on your map.
add LGeoJson inside your vue2-leaflet import.
import { LMap, LTileLayer, LGeoJson } from 'vue2-leaflet';
and add components inside the components on your template like this:
<l-geo-json
v-for="(data,i ) in datas" :key="i"
:geojson="decode(data)"
/>
v-for datas is to loop inside the datas.json file.
set your components params like this
components:{
LMap,
LTileLayer,
LGeoJson
}
add this methods:
methods:{
decode(str){
let lines = H.decode(str);
return {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": lines.polyline
}
};
}
},
it will be decode the encoded string and return the polyline
And for the lazy people ๐งธ
Top comments (3)
That was really helpful! amazing, thanks!
Hey dont forget to give your feedbacks ๐
I have found something like your decoder on python, but your code also shows a great result! thanks!