A baby step towards my interactive map application using Leaflet JavaScript


This is how my national GDP interactive map looks like on the local host. You could watch my first ever video record on YouTube of this interactive map. A brief introduction of the map and also the codes using HTML, CSS, and JavaScript. This was a very simple example I made to test some of my ideas.

If you remember my last blog that I present an interactive map host via ESRI ArcGIS Online.  After my data was successfully uploaded, I found several issues that I don’t like about it:

  1. Even though ESRI ArcGIS Online have a super nice format that you could visualize the spatial data in a pretty way, but the data loading from the site is very slow, AND IT’S COULD BE VERY EXPENSIVE. I am at my 60 days free trial at this point and I believe if I wanna use the server and do some data analysis on ArcGIS Online I have to buy their credits;
  2. The way of data presenting is restricted to the certain format depends on how you select the web map format from ESRI.

I use quite a bit of R, and I know that there are two packages in R called Shiny and Leaflet For R might help me develop the idea. I was so thrilled to find these packages, I feel a bright light shine on my road and point to the destination I wanna head to, and I found a perfect example that my web map application will look like especially the case of  American Super Zipcode. There are not only an interactive map but also while you zoom in and out you could also show some statistic results on the right side of the map. It’s too cool.

But I was so disappointed too while I found out developing a web application through Shiny and Leaflet for R would not be free, because I still need a server to host my data and APP once they could be share. However, at the point that I only need to test my ideas.

I gave up the two methods I found above and even checked out Mapbox Studio and Cartodb, two of the most popular online interactive map and visualization platform. But they are for developers (you still could use it without coding background, though), but I wanna have some features that require coding in Javascript. Leaflet JavaScript library is the last and best way I could use, which could give me enough freedom to figure out the functions/features for my application, and even the interactive analytical tools that I could put up over there. Now I also find D3 might be even more attractive because it hosts a bigger JS library that not only for the interactive map but also other online interactive way of data visualization.

I got a lot help from briefing through some YouTube videos (that’s the reason I recorded a video myself and hope it could be helpful to another struggling beginner like myself). Learn quite a lot of new things like GeoJson and GeoJson-vt. GeoJson is a geodata format for JavaScript, which is equal to shapefile for ArcGIS and QGIS. If your dataset is bigger than 1 M, the data loading to your website would slow down, so the founder of leaflet JS library wrote a vector tile JS codes (GeoJson-vt) to speed up the shapefile data loading process.

Here is my HTML, CSS and JavaScript code for the application you see in the video, You could also find me and my codes on GitHub


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s