Subscribe Now: Feed Icon

Monday, October 10, 2011

Simple Web Mapping

A friend of mine called me a few months ago and asked for advice on implementing a simple mapping application on the web. He remembered I worked on a mapping project and wanted my help.

His client wanted him to implement a web based site with a map of the client stores. The map should be customizable, meaning you could add items and remove them. And when I write map I mean a map of the interior of the store not it’s location in the world.

Now all the mapping options I know of are bulky and not quite simple but I promised him I will look it up for him.

The first thing I did was Googling “web simple map” got myself this results:

But the options were neither simple nor easy to implement.

Then I got back to the requirements – mapping a store. That is almost like my B.A. final project of internal design for apartments, that had a 3D look to it but the design mode was at it’s base a 2D painter. And that is what the requirements wanted a Painter that has only basic drawing tools like placing certain items on the canvas.

The background for this application will be an image of the store. Saving the canvas will save the items’ locations in the canvas, while loading will repaint them in place.

And the best part there is already an open source Painter application around in Java Script Called Canvas Paint (a copy of Microsoft’s Paint application in the Web) the script is also included here:


The File->Save option allow saving the image on the server…


In the end my friend decided to create a demo using this site, which allows you to place points on an image:


(when the mouse is over a point you get a tooltip with an image)

If the client likes it he will actually program something similar.


So, I guess what I am saying is check out the requirements before you jump to implementing a GIS solution. Mapping for the client doesn’t always mean using world coordinates (and often the client won’t even know what world coordinates mean).


Keywords: mapping, simple, paint

IceRocket Tags: ,,