Final Demo: UNESCO World Heritage Sites Map
After messing around with OpenLayers and D3, I wanted to create an example of plotting some data points on a MapBox World Map. The API documentation and examples look great so creating this demo should be quick and easy. The data points are geolocations that come from an external GeoJSON file and I will be using the MapBox JavaScript API to visualize the geo locations on the map. Last time I have retrieved and plotted all the IUCN landmarks and now I will focus on UNESCO world heritage sites. The UNESCO website already has these mapped but my demo will plot these heritage sites with MapBox.
Read more
Need a jVectorMap for a specific country? Get it here
The title of the post might be a bit misleading as I want to talk about how to understand and modify maps for jVectorMap rather than create maps. There is some interest on creating different versions of the original world map and not necessarily a new rendering and projection. In my last post on converting jVectorMap to JQVMap I had few requests for continent maps. So, I opened the JavaScript file that has the map data and realized that the code there is basically built on SVG paths. This is actually well documented and a link there takes you to a pretty good explanation of how SVG paths work. So, today, I will create some continents from the data we already have and talk a little about SVG and geo projection.
Read more
Sometimes you need to load and process a ton of data on the client-side, but how do you do that without blocking the UI? The problem with JavaScript on the browser is that it runs on a single thread. In other words, two scripts or processes cannot run simultaneously. If you are processing JavaScript after page load, the end user cannot interact dynamically with the page. The JavaScript will not handle UI events while processing something else. If you process something large before page load, the end user has to wait all-together which is a horrible user experience.
Running scripts asynchronously also does not help as non-blocking does not mean concurrency. So, how do you process two JavaScript functions at the same time? As the title suggests, HTML5 has Web Workers which bring threading to JavaScript and this post is going to show how to use web workers to not only process multiple scripts at the same time, but also make AJAX requests in Web Workers.
Read more
I have been getting a lot of traffic to my HTML5 sample video files post so I wanted to follow up with a general post that covers a multitude of sample files that are often needed in web development. I often also search for samples when testing and putting together different demos so I think this should be helpful to others. Below I will provide sample files for various image formats, video files, data structures, fonts, and even specific web development files.
Read more
OpenLayers has a cool example of using Flickr API to pull photos for a bounding box. When I saw this example, I right away thought about making it better by adding Panoramio photos as well with their API. This example of using Panoramio API with OpenLayers was helpful and I made a quick demo of Flickr and Panoramio Photos with OpenLayers. I have used Bing tiles and limited the zoom but than I noticed “Uncaught TypeError” errors in the console on page load. In Chrome it was Uncaught TypeError: Object #Object has no method ‘c1′ and FireFox gave me TypeError: OpenLayers.Protocol.Script.registry.c1 is not a function.
Read more
