Draw shapes, import and export data with moomapdrawer

moomapdrawer is highly configurable. Each feature can be enabled or disabled. Each controller can be used in its default mode, or actions can be linked to custom html elements. The number of tools and their options can be changed on the fly. The data (shapes) can be exported and imported as objects describing the significant shape points (or radius) with (lat, lng) coordinates. The initial center and zoom level may be set as options. The classes expose different methods whereby it is possible for example to tie the export to an event onSubmit and so forth.

Here we'll see a classical example with a few custom options. Play with it, then look at the bottom for the code and its explanation.

Click over a tool name to activate it, then follow the instructions at the bottom of the map to draw the shape.

Try the clear map and export map functionality.

A note about the text field: it uses the google geocoder to translate an address into a LatLng point, if it can't resolve the point it throw an alert, otherwise it performs an action. After inserting the address, if you click set map center then the map is centered in the resulting point. If you click draw then it is the same as doing a left mouse click in the resulting point. So depending on the active tool you draw over the map. It is useful for example if you have to draw a polyline and you have all the precise point addresses, in such case just activate the polyline tool and then fill the text field with your addresses and click draw for each of them.

click to add polygon tool   click to remove circle tool

The code

The html code:

<div id="map_example_1" style="height: 400px; width: 960px;"> </div>
<div id="tool_info" style="background: none repeat scroll 0% 0% rgb(238, 238, 238); padding-left: 5px;"> </div>
<p>
  <span class="button link" onclick="addPolygonTool() ">click to add polygon tool </span>  
  <span class="button link" onclick="removeCircleTool() ">click to remove circle tool </span>
</p>

and the javascript

var mymap;
var addPolygonTool;
var removeCircleTool;
window.addEvent('load', function() {
  mymap = new moomapdrawer.map('map_example_1', {
    tools: {
      point: {
        options: {
          max_items: 5
        }
      },
      polyline: {},
      circle: {}
    },
    tips_map_ctrl: 'tool_info',
    export_map_callback: function(data) { alert(JSON.stringify(data)); }
  });
  mymap.render();
  mymap.importMap({
    'point': [{lat: 45.575, lng: 6.17}],
    'polyline': [[{lat: 45.135, lng: 4.583}, {lat: 44.879, lng: 4.692}, {lat: 44.840, lng: 4.857}]],
    'circle': [{lat: 44.895, lng: 7.093, radius: 16310}]
  });
  addPolygonTool = function() {
    if(typeOf(polygon_tool) == 'null') {
      polygon_tool = new moomapdrawer.polygonTool(mymap);
      polygon_tool.activate();
      mymap.addTool(polygon_tool);
    }
  }
  removeCircleTool = function() {
    mymap.removeTool('circle');
  }
})

Code explained

In the basic configuration, all you have to do in html is to define a map canvas div. In this case I added a custom element for displaying tool drawing information (by default are displayed on the right side of the top bar), and two controllers to demonstrate how easy can be to add or remove controllers on the fly.

The javascript code is self-explanatory. We define a moomapdraw.map instance initializing some tools. Notice that the tools may be instantiated separately and then added to the map. Every tool has a set of options, in this case I set a maximum number of point drawable on the map, so if you try to draw a fourth point over the map an alert appears.

Then I define a custom element to contain the drawing tool information, and a calback function for data exportation. Notice that you may get the exported data calling directli moomapdrawer.map.exportData() and use such object as you want.

The two functions which manage the buttons actions are quite easy. When adding a tool we have to instantiate it, activate it (the click events) and add it to the map. Three operation needed because I preferred to decouple the tools classes from the map class. To remove a control is sufficient to call the moomapdrawer.map.removeTool function, passing it the tool name, 'circle' in this case

Keep in mind that every controller can be customized, so if you're working in an interface where the space is a problem, and you have to work on a little map, you can move the controller out of the map and place them wherever you want, in fact every tool takes as a constructor parameter the handler element.

To see all the feature available please visit the documentation, especially the reference where each public method is described, or comment here and I'll try to answer your questions.

If you're scared by the amount of code above here I post the basic code necessary to activate a full working instance without customization.

<div id="map_canvas"></div>
<script>
window.addEvent('load', function() {
  var mymap = new moomapdrawer.map('map_canvas', {
    tools: {
      point: {},
      polyline: {},
      polygon: {},
      circle: {}
    }
  });
  mymap.render();
})
</script>

mootools forge project page documentation download