Rendering huge GeoJSON data using leaflet

Posted on

 


Huge GeoJSON data may cause browser to crash, this is because of its limitations. 

Let's say you have a 100+ MB file, displaying it on the map without map server will cause a lag or unresponsive browser.

In order to address this issue, you can reduce the GeoJSON file size by simplifying its vertices using mapshaper (or using QGIS or any desktop GIS software) and converting it in TopoJSON.

TopoJSON is an extension of GeoJSON that encodes topology. Rather than representing geometries discretely, geometries in TopoJSON files are stitched together from shared line segments called arcs. This technique is similar to Matt Bloch’s MapShaper and the Arc/Info Export format, .e00.

This will significantly reduce the file size, I have tried a 100+ MB file it reduces to 30+ MB.

After the conversion, we'll be using a parser and rendering plugin for leaflet. Let's use leaflet-omnivore from mapbox in parsing TopoJSON and convert it to GeoJSON, then use Leaflet.VectorGrid.

Here's a code snippet of its implementation:


 Click for DEMO , DEMO 2

You need to include the JavaScript files of leaflet-omnivore and leaflet-vectorgrid in your html file.

<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
 <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
 

Comments

Post a Comment

Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.

Popular posts from this blog

A Better Archive Page for Blogger

Posted on
Image
This is for me, the better Archive Page. Let's see the how it looks. or you can just click my ARCHIVE PAGE in the navigation bar on top. This has cool feature also: Sort by title (ascending or descending) - by clicking the "POST TITLE" table header. Sort by date (older first or newer first) -  by clicking the "POST DATE" table header. Option to show all post by Label When you hover the post title a snippet of the post will display. Things that it doesn't have, which is acceptable: You can't change the date format You can't change table header unless you edit the script. Here's how to implement it. 1. Create a Page           For New Blogger Interface: Dashboard > Pages > New Page > Blank Page           Put a title, of course, like "Archive". :D 2. HTML Tab > Paste the code below <div id="bp_toc"> Loading TOC. Please wait....</div> <script src="http:/
Read more

Publish PostGIS Layers in GeoServer Automatically using cURL and REST

Posted on
Disclaimer: The idea came from this blog . So, what's the difference? I'm using Windows.  cURL should be installed already. If you have lots of tables in your database that you wanted to publish in GeoServer, you can use this method. Just prepare a list of tables (separated by new line) you want to publish in a text file format. Before proceeding in publishing layers, you need to setup a workspace and store in your GeoServer first. Although this can be done using cURL and REST API, but it is more convenient in that way. After a minute.... :D :D Create ".bat" file Use the code below but (of course) change the necessary inputs for /f %%a in ( <list of tables you want to publish> .txt) do  curl -v -u <username> : <password>   -XPOST -H "Content-type: text/xml" -d "<featureType><name>%%a</name></featureType>" http://localhost:8080/geoserver/rest/workspaces/ <name of workspace> /datastores/
Read more

BECK Live Action

Posted on Post a Comment
Image
After watching this manga-inspired movie, I was kinda disappointed because I did not hear Koyuki's voice. Simply because it was muted for the reason that his voice, as stated in the manga is like "God's voice". And theres no such person on Earth that has the God's voice. I was hoping it, at least on their final song. But, if you really want to hear Koyuki's voice you better watch the anime version of it! Anyway, it's still on my list as favorites because of Maho played by Shiori Katsuna. Some of their songs: "Moon Beams" This song is muted on the movie. My favorite song in this movie is "Evolution".
Read more