Welcome to WebmasterWorld Guest from

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

Developing a map, to highlight selected locations



9:58 am on Nov 27, 2012 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

This is a totally new project for me and i'm looking for a couple of pointers as much as anything else.... this could infact be a graphics question rather than a php question, but i suspect a combination of both.

first off i cannot use google/bing or any other maps because this location is a private enclosed area that isn't mapped by those applications.

I already have a map of the location, imagine a large irregularly shaped office building that has lots of offices.

I have the general layout and i have the location of every single office and what happens in each office.

The site visitor will basically select the offices they need to visit - most likely using some kind of normal site search/browse function ... that's straightforward.

Once they have selected the places they want to visit, i'd like to generate a map of the office complex with the offices they need to visit highlighted. (which they would then print off)

... i've no idea of how to even start on this.

i already have a database of all the offices and i could add extra fields as required which would enable the office to be located on the map, eg x-y co-ordinates or whatever.

i guess i'm asking, how do i then generate the map which highlights those points.

... thinking aloud, maybe the solution would be to use absolutely positioned css divs, which i would create dynamically, and position on top of the map that i have. ... and this could be in the css forum instead!


11:40 pm on Nov 27, 2012 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

If you just want to highlight some rooms, I'd go for the "CSS solution".

Essentially: make one background without the highlights as an image.
And then make one image with a transparent background (hence a png or so, jpg doesn't do transparent) with all the highlights on it (allow enough (empty) space between them.

Now you create the large background element and you load as many elements as you have highligts as children to it.

As far as CSS goes: give the background element the background image as a background, and you let it gain position by the property "position:relative".

The children: give position:absolute (relative to their parent), position them (top,left etc) and size them so they sit over the area you want to highlight. now give them the sprite image as background image and position the background.


This should work in all modern browsers without too much trouble.

If you can restrict yourself to true medern browsers (IE is the problem one - as aways), you have many more choices:
- canvas

I've done some small work with SVG: it's relatively easy to generate drawings in it, it's xml, can integrate right into xhtml (namespace) - but well IE is retarded as usual.


11:47 am on Nov 28, 2012 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

thanks swa, i figured css wasa most likely the way to go.

thanks for your pointers!

i'll look into canvas & SVG too ... i can't discount IE entirely but i can always show it a lesser map.

Featured Threads

Hot Threads This Week

Hot Threads This Month