Data, Maps, Usability, and Performance

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

Results for tag: API

Leaflet Map Markers with API Caching

caching API calls with PHP

LeafLet Map showing Flickr and Panoraimo Photos with Caching

I was looking at my OpenLayers Flickr And Panoraimo Demo today and I realized that plotting anything on a map with data that comes from an external API should leverage the server. The most important reason for this is caching but there are other benefits. You don’t have to deal with any cross-domain policy or hope for JSONP support since the communication with the API will be server-side. Also, it’s not secure to have API keys in your JavaScript as they can easily be taken, especially with search engines like NerdyData. So, it’s good practice to have these keys on the server. Today, I am going to explore some caching options in PHP and show how to create a nice Leaflet Map with markers generated by API calls that are cached on the server.
Read more

Reverse Geocoding on ModestMaps

Reverse GeoCoding

I have previously shown how to do reverse geocoding with MaxMind and now I want to show how to leverage a geocoding web service to visualize locations on a map. I have already done a ModestMaps with API calls and markers example in the past so I can leverage that to create this demo. Instead of using Google Maps Geocoding, I am going to use GeoNames Web Services and render the results on a ModestMap for comparison with MapBox image tiles.
Read more

Reverse Geocoding with MySql and MaxMind

MySQl for Reverse Geocoding

Reverse geocoding is the process of translating the geo location of a point (latitude and longitude values) into a readable address or place name. Google has the Geocoding API which includes Address Loookup and I have previously written about using Google for Reverse Geocoding. Here is an example of Google Reverse Geocoding, and here is an example of a reverse geocoding on a Google Map. This is a good tutorial explaining how to use Google’s GeoCoding API, but what about other reverse geocode services and options?

There are a few other geocoding APIs like Bing’s Find a Location by Point, MapQuest’s Reverse GeoCode Example, ArcGIS reverse geocode method, AfriGIS Reverse Geocoding API, Open Street Map reverse geocoding query, and CloudMate’s Reverse GeoCoding Method. Personally, I would go with GeoNames Web Services as it is available under Creative Commons Attribution License and you can even download their database. If you are already using MaxMind to translate IP addresses into place names, you could also leverage that database as it has city names with latitude and longitude values. But, how do you query such a database to get city names with some proximity of one geo coordinate?
Read more

Concerts Map with SongKick API and ModestMaps

Concerts Map with SongKick API

It’s time for another JavaScript mapping library and data visualization demo so today I wanted to take a look at ModestMaps with some real-time data. I was just looking for concerts around my area and stumbled on SongKick so this demo will use the SongKick API for concerts data. ModestMaps comes from the makers of MapBox and it looks really simple and clean with GitHub hosted API docs and examples you can easily download. The idea is to load a simple map, process the end users geolocation and position the map to that location, initiate a call to SongKick API for concerts in that location, and show the results in an overlayed panel, while allowing the end user to plot each concert on the map. Lets get started.

Final Demo: Find Concerts per Geo Location on a Map

Read more

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

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

Using the Pinterest API

Pinterst API documentation

Today, I hit 1000 Pinterest followers and decided to make a post about the service. 1000 followers is not much, but considering that I remain anonymous and haven’t done anything special to get followers, I think it’s noteworthy. I probably spend 30 minutes in the morning pinning images I like and that’s it. I wonder how long it will take me to hit 2000. Not following more people and not getting more involved in community boards is not helping, but I might change that soon. With all that being said, this post is about the Pinterest API.
Read more

Drawing MBTA Commuter Rail Map using their CSV and D3

MBTA Commuter Rail Map

After checking out the MBTA Developers Page and recently playing with D3.js, I wanted to draw the commuter rail stations and connections on a real map using Geo location data from MBTA feeds. Their Commuter Rail data page has a CSV file which lists all the stations per line with Geo coordinates, stop sequence, and much more. This is great and I can use my previous D3 example to draw lines in between all the stations, but when I started working on this, I have encountered some challenges.
Read more

Traceroute on a Map using Pingdom API, MaxMind, and D3

Visualizing traceroute on a map

Today, I was looking at the traceroute module for NodeJS and was thinking about combining the results of a traceroute with a geolocation service that translates the IP addresses into Geo coordinates that can be placed on a world map built with D3. MaxMind Geolocation database seemed like a good idea and I was trying to figure out how to do that on Redis for nodeJS. Then I stumbled on GeoIP which seems to make it easier to use MaxMind with Node. Actually, Philip Tellis created geoip-lite which is a native NodeJS API for the GeoLite data from MaxMind. MapTail, for example, uses geoip-lite to display visitors on a realtime map.

But, I do not have a public server with NodeJS and when I noticed that Pingdom tools has a traceroute method in their API, I decided to implement this project in PHP, using curl to retrieve traceroute information from the Pingdom API, converting IP to location using MaxMind on MySQL, and placing the geo coordinates on a D3.js map. Let’s get started.
Read more

LastFM API with PHP

Using the Last.FM API

Today I needed to quickly retrieve and store music artist photos and album covers. After looking around, I decided that Last.FM is a good place to do that and I signed up for an API key. I want to provide an artist name and run some API calls that will grab an artist photo, retrieve the top albums, and allow me to also search for a particular album. I also want to store these images on disk and convert everything to JPG format. Considering these use cases, I decided to code this up in PHP but any other server side language would also be fine. Here is my script and I am also going to include links to other implementations of pulling data from Last.FM using their API.
Read more