The "where?" question is very small one but the answer to that question is assuming increasing importance in our lives. The Key to get an answer is another word "Geolocation" that is about finding out where someone or something is located on the earth. Every good developer should be ready to respond efficiently and effectively to market demands. All the most important companies are adding locations functions to improve the services they offer their users.
In this article you will learn how to build an interesting map mashup by using one of our api (Application Programming Interface) that we have developed for our online service http://www.localstreamer.com . Localstreamer is a geolocation system that allows you to explore events and news about a place, from reading public facebook statuses and tweets updates. We provide a set of APIs to developers and 3rd parties by interacting with the service offered by the Mashape Marketplace http://www.mashape.com . Mashape system provides code and methods for communicating over HTTP with our REST server, so you can select PHP, Object-C, Java (Adnroid too), Python, Ruby as programming languages, you can easily download a ready client code to begin your development.
The demo will use html5, javascript technology and is based on the following idea: Suppose you have simple text containing some location names, this text can be taken from any source , eg an extract from a database, this demo automatically takes plain text and enrich it with static links to different geographic maps , it turns your plain text into hypertext by using our wrapper for static maps to get the url of the map offered by one of the various web map providers. A static map is a simple image of a map, it does not provide complex features, such as dragging and smooth panning and zooming.
First of all, let introduce to you our wrapper for static maps
This API is a wrapper implementation to obtain valid static image map url from different map providers (Bing maps,Facebook Places,Foursquare,Google static map,Nokia Ovi,Openstreetmap). The map providers create maps based on url Parameters sent through standard http request and returns the map in the form of an image. This service let you embed static maps of different types in your web pages. Facilitates interfacing to some map providers, by taking off from the developer work the burden of studying how to send the parameters for each provider.
Suppose your application contains such text from database: "The cities near San Francisco are equipped of natural wonders. In areas close to the city and further south to the Monterey Peninsula, the beaches are rugged and rocky. In the southwest of San Francisco is located San Jose, the capital of Silicon Valley the global center for the high-tech industry." As you can see there are different place names: San Francisco,Monterey Peninsula,San Jose,Silicon Valley. In our example we want associate a static map to these places, the map will appear as a popup when the user moves the mouse over the location name.
Want see the result immediately? View the Demo or continue reading this tutorial.
1) To invoke our API we need a token for the domain where the code is hosted. Mashape allows the issuing of JSONP Token associated with one or more domains that replaces your API Key, so that nobody can impersonate your user. You can create the jsonToken for your domain here: http://www.mashape.com/account/jsonp/index
2) We define an Array of Arrays containing [placename,latitude,longitude]
3) We call mashape API to get a valid token to invoke our Api Wrapper for static maps. The Demo executes this operation for every placename that is found in the text. The result of the call to the API is an object containing the url of the image from map provider, the text is replaced with html <img> tag code, the demo uses some simple css to create the popup.
You can see the DEMO in action here.
View the HTML source code of that web page for complete source code or go to
git://gist.github.com/995689.git
* To make work this DEMO, the code must to be hosted on a server otherwise because of security concerns Ajax will not work on your local computer. You can use a static map in many other contexts and with other programming languages not only javascript! You can use all those supported by the platform Mashape. This demo was used to demonstrate a practical example of use.
To get started with our APIs, request an invitation by sending an email to
inviteme@localstreamer.com - put in the subject "invite me!"
(we will activate activate your account within 24 hours)
New location APIs will be available in the coming weeks, bookmark this page:
http://www.localstreamer.com/pages/developers/api.html
stay tuned ;-)