Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Plotting GeoLocations with MapBox API

Plot Data Points with MapBox

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

Creating Maps for jVectorMap

jVectorMap Continent Maps

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

HTML5 Web Workers for AJAX Requests

Web Workers and Ajax

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

Sample Files for Development

Example Files for Development

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 with Flickr and Panoraimo APIs

OpenLayers Bounding Box BBOX

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