Develop a shopping street

HELP! My boss came up with a "great" idea...he want’s to make an online shopping street in modx. He wants to make a map of a shopping centre and on that map he wants to place the shops that we add to the website. The shops need to be placed in a certain area on the page, and when we add a new shop/document this one has to appear on the map. But...random on the map, not in any order.

I have thougt about doing this with ditto. I could make a background of a map with streets and let ditto output the data over the map, but then it’s al in order and everything is in a horizontal or vertical row. Means that i can only make streets in 1 direction...

I haven’t any idea at all how to get this working, maybe someone here has even done a thing like this before?

Something like this, with shops (blocks like the red in the middle) between the streets:

You could use the google maps api for this, I am not sure how you can fix the random placing of the points. But with google maps you can even use your own maps images so you can use a fake map!

I think you should create a array with possible locations on the map and then assign that randomly to a shop. Or do you mean to give every shop it’s own place? That can just be done with the google api

I have a fake map, and on that map there are (for example) 25 empty spaces randomly divided over the map. Those spaces are always on the same spot on the map and once there is a shop assigned to a place, it’s always assigned to that same place and spot. Like in real life; always on the same address.

When I add a new shop, I want to put that shop on an "address" on the map.

Well, you should take a look at http://code.google.com/apis/maps/

There is a example which overlays a image over a map, maybe you can do something like that for you idea.

Perhaps an image map would work for your situation:

http://www.javascriptkit.com/howto/imagemap.shtml

I second the image map. CSSplay.co.uk has a CSS image map example.

I’m using this jQuery plugin to make an interactive map for a MODx site:

http://www.newmediacampaigns.com/page/a-jquery-plugin-for-zoomable-interactive-maps

Just add some template variables that specify your x-y location, use ditto or something to spit out the data it needs, etc. It is a perfect fit for what you need.

(Does anyone have time to make this plugin into a MODx add-on? It is a pretty cool tool...)

That’s a very interesting jQuery plugin, I’ll keep my eye on that one.

I’ve used a Flash solution called amMap to do this before. You can set a custom image as a background and use XML to define points, zooming, icons, labels, pop-ups and other interactive bits of the map. The XML can of course be generated with Ditto (if your points are modx documents) or a custom snippet.

http://www.ammap.com/

If I understood correctly this is a fictitious street, not a real street. Cant you simply put the map in the background and a grid over it and have the grid elements with unique IDs and have them positioned over the map image. When one is ’sold’ the app will randomly assign an ID to the store and that ID will then be populated on the grid over the map?

Not sure how to make it zoom though...

I am just thinking out loud here

BTW - That jQuery plugin looks very interesting...thanks for posting that.

OK, I converted that jQuery plugin into a MODx snippet. You can find it here...
http://modxcms.com/forums/index.php/topic,37358.msg225456.html#msg225456