MallMapper : A Mall mapping tool based on OpenLayers

This page will show you how transform an ordinary textarea into a mapping tool, It will also show you how the use this mapping tool

1. Developer Examples
2. End user Guide

---

Simple Example

This is a simple example that attaches MallMapper to an emtpy textarea.

        $(document).ready(function(){
            new MallMapper({
                entitysetRootURL : rootURL + "/data/entitysets/",
                tilesetRootURL : rootURL + "/data/tilesets/",
                domInputId : 'textarea_1',
                entitySet : 'default',
                tileSet : 'mall_1',
                mode : 'navigation',
                styleMapGenerator : MallMapper.DefaultStyleGenerator,
                onReady : function(){;}
           }).start();
        }); 
        

---

Dynamic Example

Click "Transform To Map" button to attach MallMapper to this element. Note that MallMapper parses the text in the textarea and restores its state.

{"tileset":"mall_1","entityset":"default","entities":[{"id":"a42cd47d","type":"shop","data":{"type":"entity","title":"Shop Title","desc":"Shop Description","entityType":"shop","anchor":"21454f32"},"x":2308,"y":1280},{"id":"a8e00ab5","type":"elevator","data":{"type":"entity","title":"Elevator Title","desc":"Elevator Description","entityType":"elevator","anchor":"21454f32"},"x":1836,"y":1156}],"paths":{"vertices":[{"id":"21454f32","entities":["a42cd47d","a8e00ab5"],"coords":[2708,1584]},{"id":"bca3b5d3","entities":[],"coords":[1744,1780]},{"id":"068f1d78","entities":[],"coords":[1288,1116]},{"id":"7b5ebe7f","entities":[],"coords":[2304,756]}],"lines":[[0,1],[1,2],[2,3],[3,0],[2,0],[3,1]]}}
Transform To Map

---

End User Guide

There are three modes allowed by the mapper

1. Navigation

2. Entity

3. Path

Navigation

In this mode you are limited to panning the map

Entity

In this mode you can

1. Add a new entity : By clicking any empty place on the map.
2. Edit an entity : By clicking that entity.
3. Moving an entity : By Dragging and dropping.
4. Deleting an entity: By Hold the "Shift" key and clicking that entity.
5. Establish a connection between a point on the path with an entity:
   - First select a point on the path by clicking it
   - Then Hold "Ctrl" and click an entity, this will attach that entity to that point on the path.
   

Path

In this mode you can

1. Add a node to the path : By clicking any empty place on the map.
2. Introduce a middle node: By dragging the small green points on the line.
3. Moving a node : By Dragging and dropping.
4. Deleting an node: By Hold the "Shift" key and clicking that node.
5. Connecting to ends of the path : By holding "Ctrl" key and clicking on the node to connect to