Skip to content
This repository has been archived by the owner on Nov 10, 2021. It is now read-only.

KLM layers villages on the map

tarmop edited this page Mar 4, 2015 · 1 revision

KML layer (villages on the map)

What is KML?

from wikipedia: "Keyhole Markup Language (KML) is an XML notation for expressing geographic annotation and visualization within Internet-based, two-dimensional maps and three-dimensional Earth browsers. KML was developed for use with Google Earth, which was originally named Keyhole Earth Viewer. It was created by Keyhole, Inc, which was acquired by Google in 2004. KML became an international standard of the Open Geospatial Consortium in 2008.[1][2] Google Earth was the first program able to view and graphically edit KML files. Other projects such as Marble have also started to develop KML support.[3]" Although KML was first used in google earth, Google maps javascript api v3 also has support for it.

In this project

In this project the we need to show around 600 villages on the map at the same time. If those villages were default google map markers it would greatly affect the client side performance and make the application unusable on some devices. This would also effect the user experience. So instead of rendering 600 individual markers we use KML layer.

Basically we have data from every village inside of a kml file. This file is send to google and turned into a data layer. So villages are shown on top of the maptiles as images instead of individual markers. So we get 1 extra image for each map tile from google (see below), and handling 16 extra images instead of original 600 greatly increases the client side performance.

KML file is in the filepath: public/system/assets/KML/villagelayer.kml This file needs to be accessible for the public. If there is need to adjust location, or add a new village to the map, data should be written directly to KML file.

Other data layers: KML layer is good option for many different data points, but google maps offers multiple other options for styling and creating dynamic data layers. see: https://developers.google.com/maps/documentation/javascript/examples/layer-data-dynamic

Clone this wiki locally