Where to start with map application [closed]

Question

i'm trying to desing a new application which allow user see he/her current location on a custom map (office, university compus, etc). but actually i have a couple of question in my mind (i haven't designed this kind of application before). i'm wondering:

• How can i draw my own maps, what is the best option for it? there any format that i have to care of, there are any specification about it ?
• Once i have my custom map. how can i do to mapping a global position system with the local positions ?
• What are the tricks behing zoom on maps ? just differents layers with more or less informations and those layers changes on users demand ?
• If a whant to mark some specific points over the map, like a cafeteria, boss's office etc, how can i do that ?

Sorry if my questions are too much generics and dumb, but i really need some clues about this topic because i don't have any idea how to design this kind of application as best as possible. and we don't whant to reinvent the wheel.

I will appreciate any help that you can provide me in order to desing this application

Answer 1

There are a number of approaches you can take to creating a maps application. Which one you use depends on the set of features you want to support, and the degree of control you want to maintain over the product.

If you want something like an embedded google map, then clearly the JavaScript Google Maps API may be best solution. If you need to support further features from the server side, like directions, you can make use of the web services api:

http://code.google.com/apis/maps/documentation/webservices/index.html

If, on the other hand, you essentially need a zoomable map of an area that you can define with markers and borders drawn from your database, and you want complete custom control over this image without having to rely on Google Maps' data or branding, then you can fairly easily build a scalable image either on the client or server, or both.

To start, you will need a set of point coordinates from which to draw your map. These can be derived from the SVG generated by a program like Adobe Illustrator when you draw vector graphics. Thus you could draw your own map in Illustrator and use the generated svg to create your map. In this case you will have to read about SVG and understand how to use it. Raphael.js is an excellent library that offers cross-browser compatible handling of SVG. If your map is of a familiar region, such as a country, you may be able to find SVG coordinates for it already on the web. You could start by grabbing a subset of the data in this file on wikipedia for the country or region you want to map.

Once you have a set of coordinates that define your map areas, you can keep them in a config file that can be read into memory from disk by your application as needed. It's convenient to save this data in the form of a hash, where each set of key-value pairs stores a separate svg 'path', or set of point coordinates that forms a closed shape. These could represent, for instance, the counties in a state.

Once you have the appropriate 'paths' stored in this manner, it is relatively easy to write a wide variety of software implementations.

1. Check out the imagemagick convert documentation for the -draw option for an example of how to draw a png, jpeg, or gif on your server from your stored svg paths.
2. Adam Hooper has some brilliant ideas of what to do with a custom map using SVG on the client side: http://adamhooper.com/eng/articles/9
3. Note that you do not necessarily need to use SVG. Here's an example of a map drawn on the server using ImageMagick, with a highlightable clickmap drawn over it by the browser, where the highlighting is handled by the jquery maphighlight plugin, which uses the canvas element where it is supported and VML in its place on Internet Explorer browsers. All of these layers (ImageMagick, client-side click-map, and client-side javascript highlighting) are built with straight lines drawn between point coordinates, so none of this is actually SVG, and may be easier to understand. Have a look at the page source to see how the click map is drawn, then look at the maphighlight plugin to understand what's going on: http://davidlynch.org/js/maphilight/docs/

---

A third option, if you need to support more google-maps-like features, but want to add your own map data without using an overlay, is to implement some application of Open Street Maps. If you go to openstreetmap.org, find the area you want to customize, and click the edit tab at the top, you can edit the map as needed for your area. This edits the map data for all users of the Open Street Map service. Then you can get the openlayers javascript from http://openlayers.org/ to render a map on your website from Open Street Maps data that you can freely edit yourself. Also see the OpenStreetMap Wiki that tells you more about the OpenStreetMap movement.

Answer 2

If you don't want to reinvent the wheel, then don't try do do it: take the Google Maps API, add some markers and you're done. Zooming included. They have examples to guide you and there's loads of knowledge about the usage.

All you need is a free API key.

Edit: Your comment in the original question indicates that you want to use a custom overlay over existing maps. That's also possible as this example shows (see docs for custom overlays).