Class: Map

Map(canvas, optionsopt)

Open Street Map maps drawing class, provides tools for drawing over an open street map canvas, and export drawn data.

This class handles the drawing tools used to draw over a map and allows data exportation.

The map manages also some controllers

  • clear map controller
  • export map controller
  • geocoder text field controller
  • tips controller

Moreover every drawing tool has its own controller, which may be specifically set or used in its default form.

Each map controller may be specified as custom, may be removed by setting the related option to null or used in its default form.

Once instantiated the class and set the tools by options or instantiating direclty the drawing tool classes and adding them to the map, see Map#addTool, call the render method in order to render the widget.
It is possible to continue configuring the widget adding or removing tools and customize the map instance which is returned by the Map#gmap method.

When defining specific map controllers, be sure to make them handle the proper map methods.

Constructor

new Map(canvas, optionsopt)

Constrcuts a Map

Parameters:
Name Type Attributes Description
canvas Element | String The map container element as selector or jQuery element
options Object <optional>
 A class options object
Properties
Name Type Attributes Default Description
center Array <optional>
 new Array(45, 7) The initial map center coordinates, (lat, lng).
zoom Number <optional>
 8 The the initial map zoom level.
tools Object <optional>
 {} The object containing the tool's names and options to be activated when initializing the map. It's a shortcut to easily define set and active tools objects.
fullscreen Number <optional>
 true Whether or not to enable fullscreen functionality
tools.point Object <optional>
 The point tool init object
Properties
Name Type Attributes Description
ctrl String | Element <optional>
 The selector or jQuery element which controls the tool, default the built-in menu voice
options Object <optional>
 The tool options object, see PointTool for available properties
tools.polyline Object <optional>
 The polyline tool init object
Properties
Name Type Attributes Description
ctrl String | Element <optional>
 The selector or jQuery element which controls the tool, default the built-in menu voice
options Object <optional>
 The tool options object, see PolylineTool for available properties
tools.polygon Object <optional>
 The polygon tool init object
Properties
Name Type Attributes Description
ctrl String | Element <optional>
 The selector or jQuery element which controls the tool, default the built-in menu voice
options Object <optional>
 The tool options object, see PolygonTool for available properties
tools.circle Object <optional>
 The circle tool init object
Properties
Name Type Attributes Description
ctrl String | Element <optional>
 The selctor or jQuery element which controls the tool, default the built-in menu voice
options Object <optional>
 The tool options object, see CircleTool for available properties
clearMapCtrl String | Element <optional>
 'default' The clear map controller (clears all drawings over the map). If 'default' the built-in controller is used, if null the clear map functionality is removed. If id attribute or an element the clear map functionality is attached to the element.
exportMapCtrl String | Element <optional>
 'default' The export map controller (exports all shapes drawed over the map). If 'default' the built-in controller is used, if null the export map functionality is removed. If id attribute or an element the clear map functionality is attached to the element.
exportMapCb function <optional>
 null The callback function to call when the export map button is pressed. The callback function receives one argument, the exported data as returned by the osmdrawer.Map#exportMap method.
geocoderMapField Boolean <optional>
 true Whether or not to add the gecoder functionality which allows to center the map in a point defined through an address, or to pass the lat,lng coordinates found to the map click handlers (exactly as click over the map in a lat,lng point).
tipsMapCtrl String | Element <optional>
 'default' The help tips map controller (shows tips about drawing tools). If 'default' the built-in controller is used, if null the tips box is not shown, if id attribute or an element the functionality is attached to the element.
Source:
Example
var mymap = new osmdrawer.Map('my_map_canvas_id', {
  tools: {
    point: {
      options: {
        max_items: 5
      }
    },
    circle: {}
  }
});

Methods

addDefaultCtrl(ctrl)

Adds a controller in the default controllers container

Parameters:
Name Type Description
ctrl Object The jQuery controller element to be added
Source:
Returns:
void

addTool(tool) → {Map}

Adds a drawing tool

Parameters:
Name Type Description
tool osmdrawer.Tool The tool object
Source:
Returns:
map object
Type
Map

clearMap() → {Map}

Clears the map

Source:
Returns:
map object
Type
Map

exportMap() → {Object}

Exports the map drawed shapes as data points

Source:
Returns:
data The drawed data
Type
Object
Example
// exported data
{
 'point': [
   {lat: 45, lng: 12},
   {lat: 43, lng: 16}
 ],
 'polyline': [
   [
     {lat: 45, lng: 12},
     {lat: 42, lng: 12},
     {lat: 42.6, lng: 11}
   ],
   [
     {lat: 36.7, lng: 11.2},
     {lat: 39, lng: 12}
   ],
 ],
 'circle': [
   {lat: 45, lng: 12, radius: 10000},
   {lat: 44, lng: 11, radius: 230000}
 ]
}

(async) geocoderCenter() → {Map}

Sets the map center converting the geocoder field input address in a LatLng point

Source:
Returns:
map object
Type
Map

(async) geocoderDraw() → {Map}

Fires a map click in a LatLng point converted from the geocoder field input address

Source:
Returns:
map object
Type
Map

getDrawingTool() → {osmdrawer.Tool}

Gets the active drawing tool

Source:
Returns:
The drawing tool
Type
osmdrawer.Tool

getTool(toolName) → {osmdrawer.Tool|null}

Gets a tool object giving its name

Parameters:
Name Type Description
toolName String One of the supported tools name
Source:
Returns:
The tool object if set or null
Type
osmdrawer.Tool | null

gmap() → {Map}

Returns the leaflet map instance

The leaflet map class instance allows to customize direclty some map properties using the Map public interface
Source:
Returns:
The leaflet map instance
Type
Map

importMap(data) → {Map}

Imports data

Data must be in the same format as the exported ones, see Map#exportMap
Parameters:
Name Type Description
data Object The data object
Source:
Returns:
map object
Type
Map

removeTool(toolName, tool) → {Map}

Removes a drawing tool

Parameters:
Name Type Description
toolName String The name of the tool to be removed
tool osmdrawer.Tool The tool object
Source:
Returns:
map object
Type
Map

render() → {Map}

Renders the widget

Source:
Returns:
map object
Type
Map

setCenter(center) → {Map}

Sets the center of the map

Parameters:
Name Type Description
center Array The [lat, lng] coordinates array
Source:
Returns:
map object
Type
Map

setClearMapCtrl(ctrl) → {Map}

Sets the clear map controller

Parameters:
Name Type Description
ctrl String | Element The clear map controller. If 'default' the built-in controller is used, if null the clear map functionality is removed. If selctor or jQuery element the clear map functionality is attached to the element.
Source:
Returns:
map object
Type
Map

setDrawingTool(tool) → {Map}

Sets the active drawing tool name

Parameters:
Name Type Description
tool osmdrawer.Tool | null The actual drawing tool, null to have no active tool
Source:
Returns:
map object
Type
Map

setExportMapCtrl(ctrl) → {Map}

Sets the export map controller

Parameters:
Name Type Description
ctrl String | Element The clear map controller. If 'default' the built-in controller is used, if null the export map functionality is removed. If selctor or jQuery element the export map functionality is attached to the element.
Source:
Returns:
map object
Type
Map

setFullscreen(activate) → {Map}

Sets the fullscreen option

Parameters:
Name Type Description
activate Boolean Whether or not to activate the fullscreen functionality
Source:
Returns:
map object
Type
Map

setGeocoderMapField(activate) → {Map}

Sets the geocoder map field option

Parameters:
Name Type Description
activate Boolean Whether or not to activate the geocoder functionality
Source:
Returns:
map object
Type
Map

setTipsMapCtrl(ctrl) → {Map}

Sets the tips map controller

Parameters:
Name Type Description
ctrl String | Element The help tips map controller (shows tips about drawing tools). If 'default' the built-in controller is used, if null the tips box is not shown, if selector or jQuery element the functionality is attached to the element
Source:
Returns:
map object
Type
Map

setZoom(zoom) → {Map}

Sets the zoom of the map

Parameters:
Name Type Description
zoom Number The zoom level
Source:
Returns:
map object
Type
Map

updateTips(html)

Updates the text displayed in the tips controller

Parameters:
Name Type Description
html String The tip text
Source:
Returns:
void