DEV Community

Ayrton
Ayrton

Posted on • Updated on

Very fast Polylines delivery with Leaflet, HERE, VueJs #EN

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
Enter fullscreen mode Exit fullscreen mode

next, install Leaflet packages and Vue2-Leaflet

npm install leaflet
npm install vue2-leaflet
Enter fullscreen mode Exit fullscreen mode

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:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      mapOptions: {
        zoomSnap: 0.5
      }
    }
  }
}
</script>

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

this file is very light, 58 ko !!!

so import this script inside a folder like
src/assets/flexiblepolyline.js

https://gitlab.com/-/snippets/2020385
Enter fullscreen mode Exit fullscreen mode

and import it inside your components

import H from '../assets/js/flexiblepolyline.js'
Enter fullscreen mode Exit fullscreen mode

get the exemple file of datas.json and import it too

import datas from '../assets/datas.json';
Enter fullscreen mode Exit fullscreen mode

Now lets started to create the Polyline on your map.

add LGeoJson inside your vue2-leaflet import.

import { LMap, LTileLayer, LGeoJson } from 'vue2-leaflet';
Enter fullscreen mode Exit fullscreen mode

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)"
        />
Enter fullscreen mode Exit fullscreen mode

v-for datas is to loop inside the datas.json file.

set your components params like this

components:{
    LMap,
    LTileLayer,
    LGeoJson
  }
Enter fullscreen mode Exit fullscreen mode

add this methods:

methods:{
    decode(str){
      let lines = H.decode(str);
      return {
          "type": "Feature",
          "geometry": {
              "type": "LineString",
              "coordinates": lines.polyline
          }
      };
    }
  },
Enter fullscreen mode Exit fullscreen mode

it will be decode the encoded string and return the polyline

Enjoy the result ๐Ÿพ !
Alt Text

And for the lazy people ๐Ÿงธ

Top comments (3)

Collapse
 
lamaxi profile image
lamaxi

That was really helpful! amazing, thanks!

Collapse
 
simerca profile image
Ayrton

Hey dont forget to give your feedbacks ๐Ÿ‘

Collapse
 
lamaxi profile image
lamaxi

I have found something like your decoder on python, but your code also shows a great result! thanks!