adjustHeight ()

Adjusts height of the container to fit content.

destroy ()

Destroys the controller.

getMainTemplate ()

This method must be overriden by a child class and to return an HTML code for the main content

getToolbarTemplate ()

This method must be overriden by a child class and return an HTML code for the toolbar.

init ()

Initialization actions. Empty method. Can be overriden by child classes.

redraw (data)

Redraws the container.

render ()

Renders the content.

setEventHandlers ()

Set event handlers. Can be overriden by a child class.

setEventHandlersCommon ()

Set common event handlers for all child classes

updateScroll ()

Updates the size of the scrollable container. Automatically fires when window size or content size changes.

updateTopShift ()

Updates top shift of the main container depending on toolbar height

viewDidAppear ()

Fires when the view appears after being hidden. Should be overriden by a child class.

viewDidDisappear ()

This method fires when the view disappears. Should be overriden by a child class.

viewDidLoad ()

This method fires when the view is fully loaded. Can be used to do any final actions.

viewReadyToFill ()

Fires right before rendering starts.

fill (data)

Fill local database storage with preloaded data

getAll (params)

Loads objects from remote server, from the table connected to current MapSVG map. This method triggers reloading markers on the map and reloading items in the directory. You can add a custom event handler using MapSVG "dataLoaded" event.

Returns

Examples

mapsvg.getDatabase().getAll({
  page: 1,
  perpage: 30,
  sortBy: 'id',
  sortDir: 'DESC',
  filters: {regions: "US-TX"}
}).done(function(objects){
  // do something
});

getLoaded ()

Returns all loaded objects

Returns

getLoadedObject (id)

Returns one of the loaded objects by ID. Objects are usually loaded with pagination and this method doesn't return an object if it's outside of the currently loaded page.

Returns

Examples

var obejct = mapsvg.getDatabase().getLoadedObject(2);

getSchema (options)

Returns table schema

Returns

addFilter (field)

Deprecated: This is deprecated.

addPagination (pager)

Adds pagination buttons to the directory.

deselectItems ()

Deselects directory items

getToolbarTemplate ()

Returns a HTML content for the Directory toolbar

Returns

highlightItems (ids)

Highlights directory items

loadItemsToDirectory ()

Loads items from a source defined in settings to the directory. The source can be "Regions" or "Database".

selectItems (ids)

Highlights directory items

setFilters ()

Deprecated: This is deprecated.

toggle (on)

Toggles view between map and directory on mobile devices

unhighlightItems ()

Unhighlights directory items

setLatLng (latlng)

Sets geo-coordinates of the location

toJSON ()

Returns JSON of the Location

Returns

attachDataToRegions (object)

Attaches DB Objects to Regions

centerOn (region, yShift)

Centers map on Region or Marker.

convertGeoToSVG (coords)

Converts geo-coordinates (latitude/lognitude) to SVG coordinates

Returns

convertMouseToSVG (e)

Converts mouse pointer coordinates to SVG coordinates

Returns

convertPixelToSVG (xy)

Converts pixel coordinates (relative to map container) to SVG coordinates

Returns

convertSVGToGeo (tx, ty)

Converts SVG coordinates to geo-coordinates (latitude/lognitude).

Returns

convertSVGToPixel (xy)

Converts SVG coordinates to pixel coodinates relative to map container

Returns

deleteClusters ()

Deletes all markers from the map

deleteLabelsMarkers ()

Deletes Marker lables

deleteMarkers ()

Deletes all markers from the map

deselectAllMarkers ()

Deselects all Markers

deselectAllRegions ()

Deselects all Regions

deselectMarker (marker)

Deselects one Marker

deselectRegion (region)

Deselects one Region

destroy ()

Destroys the map and all related containers.

Returns

fitMarkers ()

Changes maps viewBox to fit loaded markers.

getData ()

Was used previously to return _data that cotained all map properties. Now properties are stored in the map instance itself.

Deprecated: This is deprecated.

Returns

getDb ()

Returns Database

Returns

Examples

var objects = mapsvg.getDatabase().getLoaded();
var object  = mapsvg.getDatabase().getLoadedObject(12);

// Filter DB by region "US-TX". This automatically triggers markers and directory reloading
mapsvg.getDatabase().getAll({filters: {regions: "US-TX"}});

getDbRegions ()

Returns Regions database

Returns

getGeoViewBox ()

Returns geo-bounds of the map.

Returns

getMarker (id)

Finds a Marker by ID

Returns

Examples

var marker = mapsvg.getMarker("marker_12");

getOptions (forTemplate, forWeb, optionsDelta)

Returns map options.

Returns

getPagination (callback)

Generates HTML with pagination buttons and attaches callback event on button click

getRegion (id)

Finds a Region by ID

Returns

Examples

var region = mapsvg.getRegion("US-TX");

getRegions (id)

Returns all Regions

Returns

getScale ()

Returns current SVG scale related to screen - map screen pixels to SVG points ratio. Example: if SVG current viewBox width is 600 and the map is shown in a 300px container, the map scale is 0.5 (300/600 = 0.5)

Returns

getSelected ()

Returns array of IDs of selected Regions

Returns

getUserLocation (callback)

Gets user's current location by using browser's HTML5 geolocation feature. Works only under HTTPS connection!

Returns

getViewBox ()

Returns current viewBox

Returns

hidePopover ()

Hides the popover

hideTip ()

Hides the tooltip

highlightMarker (marker)

Highlight marker

highlightRegions (regions)

Highlights an array of Regions (used on mouseover)

isGeo ()

Checks if the map is geo-calibrated

Returns

isRegionDisabled (id, svgfill)

Checks if Region should be disabled

Returns

labelsRegionsAdjustPosition ()

Adjusts position of Region Labels

loadDetailsView (obj)

Loads Details View for an object (Region or DB Object)

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.loadDetailsView(region);

var object = mapsvg.database.getLoadedObject(12);
mapsvg.loadDetailsView(object);

loadFiltersController ($container, modal)

Loads filters controller into a provided container

mapAdjustStrokes ()

Adjusts stroke widths on zoom change to keeps their widths the same on all zoom levels.

markerAdd (marker)

Adds a marker to the map.

markerDelete (marker)

Deletes a marker

markerRemove (marker)

Removes marker from the map

markersAdjustPosition ()

Adjusts position of Markers and MarkerClusters. This method is called on zoom or when map container is resized.

markersClusterAdd (markersCluster)

Adds a marker cluster

off (event)

Removes an event handler

Examples

mapsvg.off("zoom");

on (event, callback)

Adds an event handler

Examples

mapsvg.on("zoom", function(){
  console.log("The map was zoomed!");
})

panBy (x, y)

Shift the map by x,y pixels

pickGaugeColor (gaugeValue)

For choropleth map: returns color for given number value

Returns

popoverAdjustPosition ()

Adjusts popover position. User on zoom and when map container is resized.

popoverOffHandler (e)

Event handler that catches clicks outside of the popover and closes the popover.

redraw ()

Redraws the map. Must be called when the map is shown after being hidden.

regionClickHandler (e, region)

Event handler that is fired on click on a Region / Marker / MarkerCluster

Returns

regionsRedrawColors ()

Redraws colors of regions. Used when Region statuses are loaded from the database or when choropleth map is enabled.

reloadRegions ()

Reloads Regions from SVG file

reloadRegionsFull ()

Reloads Regions data

selectMarker (marker)

Selects a Marker

Returns

selectRegion (id, skipDirectorySelection)

Selects a Region

Returns

setActions (options)

Sets map actions that should be performed on Region click. Marker click, etc.

Examples

mapsvg.setActions({
  "click.region": {
    showPopover: true,
    showDetails: false
  }
})

setColors (colors)

Sets color settings (background, regions, containers, etc.)

Examples

mapsvg.setColors({
  background: "#EEEEEE",
  hover: "10",
  selected: "20",
  leftSidebar: "#FF2233",
  detailsView: "#FFFFFF"
});

setContainers (options)

Sets container options: leftSidebar, rightSidebar, header, footer.

Examples

mapsvg.setContainers({
  leftSidebar: {
    on: true,
    width: "300px"
  }
});

setControls (options)

Sets map control buttons.

Examples

mapsvg.setControls({
  location: 'right',
  zoom: true,
  zoomReset: true,
  userLocation: true
});

setCursor (type)

Sets mouse pointer cursor style on hover on regions / markers.

setDatabase (options)

Sets database options.

Examples

mapsvg.setDatabase({
  pagination: {on: true, perpage: 30}
});

setDetailsView (options)

Sets Details View options

setDisableAll (on)

Disables all Regions if "true" is passed.

setDisableLinks (on)

Disables/enables redirection by link on click on a region or marker when "Go to link..." feature is enabled Used to prevent redirection in the map editor.

setEvents (functions)

Sets even handlers

setFilters (options)

Sets filter options

Examples

mapsvg.setFilters{{
  on: true,
  location: "leftSidebar"
}};

setGauge (options)

Sets choropleth map options

Examples

mapsvg.setGauge({
  on: true,
  colors: {
    high: "#FF0000",
    low: "#00FF00"
  }
  labels: {
    high: "high",
    low: "low"
  }
});

setGoogleMaps (options)

Sets Google Map options.

Examples

mapsvg.setGoogleMaps({
  on: true,
  type: "terrain"
});

// Get Google Maps instance:
var gm = mapsvg.googleMaps.map;

setLabelsMarkers (options)

Sets Marker labels

setLoadingText (val)

Sets loading text message

setMenu (options)

Sets directory options.

Returns

Examples

mapsvg.setDirectory({
  on: true,
  container: "leftSidebar"
});

setMobileView (options)

Sets mobile view options

setMultiSelect (on, deselect)

Enables/disables "multiselect" option that allows to select multiple regions.

setPadding (options)

Sets map padding.

setPagination ()

Adds pagination controls to the map and/or directory

setPopovers (options)

Sets popover options.

Examples

mapsvg.setPopovers({
  on: true,
  width: 300, // pixels
  maxWidth: 70, // percents of map container
  maxHeight: 70, // percents of map container
  mobileFullscreen: true
});

setRegionChoroplethField (field)

Sets the Region field that is used for choropleth map

setRegionEditHandler (handler)

Sets callback function that is called on click on a Region. Used in the Map Editor on click on a Region in the "Edit regions" map mode.

setRegionStatus (region, status)

Sets status of a Region

setResponsive (on)

Sets map responsiveness on/off. When map is responsive, it takes the full width of the parent container.

setScroll (options, skipEvents)

Sets map scroll options.

Examples

mapsvg.setScroll({
  on: true,
  limit: false // limit scroll to map bounds
});

setSize (width, height, responsive)

Sets map size. Can accept both or just 1 parameter - width or height. The missing parameter will be calcualted.

Returns

setTemplates (templates)

Sets templates body

setTooltips (options)

Sets tooltips options.

Examples

mapsvg.setTooltips({
  on: true,
  position: "bottom-left",
  maxWidth: "300"
})

setViewBox (v, skipAdjustments)

Sets map viewbox

setViewBoxByGoogleMapBounds ()

Sets SVG viewBox by Google Maps bounds. Used to overlay SVG map on Google Map.

setZoom (options)

Sets map zoom options.

Examples

mapsvg.setZoom({
  on: true,
  mousewheel: true,
  limit: [-5,10], // allow -5 zoom steps back and +20 zoom steps up from initial position.
});

showPopover (object)

Shows a popover for provided Region or DB Object.

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.showPopover(region);

showTooltip (html)

Shows the tooltip with provided HTML content.

showUserLocation (callback)

Shows user current location Works only under HTTPS connection

Returns

trigger (event)

Triggers an event

unhighlightMarker ()

Unhighlights all Regions (used on mouseout)

unhighlightRegions ()

Unhighlights all Regions (used on mouseout)

update (options)

Updates map settings.

Examples

mapsvg.update({
  popovers: {on: true},
  colors: {
    background: "red"
  }
});

viewBoxReset (toInitial)

Resets map zoom and scroll to initial position.

Returns

viewBoxSetBySize (width, height)

Sets map container size and viewBox size. This method should be used when you need to change both map container size and viewBox size.

Returns

zoom (delta, center, exact)

Zooms the map

Returns

zoomIn (center)

Zooms-in the map

zoomOut (center)

Zooms-out the map

zoomTo (mapObjects, zoomToLevel)

Zooms to Region, Marker or array of Markers.

Examples

var region = mapsvg.getRegion("US-TX");
mapsvg.zoomTo(region);

attr (v1, v2)

Sets attribute of an SVG object

Returns

getCenter ()

Returns center of an object in pixel coordinates

Returns

getCenterLatLng (yShift)

Returns center of an object in geo-coordinates

Returns

getCenterSVG ()

Returns center of an object in SVG coordinates

Returns

getComputedStyle (prop, node)

Returns style of a given property of an SVG object

Returns

getGeoBounds ()

Returns geo-bounds of an object - South-West & North-East points.

Returns

getStyle (prop)

Returns style of a property of the SVG object

Returns

isMarker ()

Checks whether the object is Marker

Returns

isRegion ()

Checks whether the object is Region

Returns

off (event)

Removes event hanlder

on (event, callback)

Attaches event handler to the object

setData (data)

Adds custom data to object

setId (id)

Set ID of an object

trigger (event)

Fires an event

adjustPosition ()

Adjusts position of the Marker. Called on map zoom and on map container resize.

delete ()

Deletes the Marker

deselect ()

Deselect the Marker.

getBBox ()

Get SVG bounding box of the Marker

Returns

getOptions ()

Get Marker options

Returns

hide ()

Hides the Marker

highlight ()

Highlight the Marker. Used on mouseover.

select ()

Select the Marker.

setGeoCoords (coords)

Sets geo-coordinates of the Marker and calculates its x/y coordinates.

setId (id)

Set ID of the Marker

setImage (src, mapScale)

Set image of the Marker

setObject (obj)

Sets parent DB object of the Marker

setXy (xy)

Set x/y coordinates of the Marker

show ()

Shows the Marker

unhighlight ()

Unhighlight the Marker. Used on mouseout.

update (data, mapScale)

Update marker settings

addMarker (marker)

Adds marker to the cluster.

adjustPosition ()

Adjusts position of the cluster. Called on zoom and map container resize.

canTakeMarker (marker)

Checks if provided marker should be added into this cluster.

Returns

destroy ()

Destroys the cluster

getBBox ()

Get SVG bounding box of the MarkersCluster

Returns

adjustHeight ()

Adjusts height of the popover

adjustPosition ()

Adjsuts position of the popver. Gets called on zoom and map container resize.

close ()

Closes the popover

destroy ()

Destroys the popover

getToolbarTemplate ()

Returns HTML template for the popover toolbar

Returns

setEventHandlers ()

Sets event handlers for the popover

setPoint (point)

Sets a point where the popover should be shown

show ()

Shows the popover

deselect ()

Deselect the Region.

forTemplate ()

Returns an object with properties of the Region formatted for a template

Returns

getBBox ()

Returns SVG bounding box of the Region

Returns

getChoroplethColor ()

Returns color of the Region for choropleth map

Returns

getDisabledState (asDefault)

Checks if Region should be disabled

Returns

getOptions (forTemplate)

Returns Region properties

Returns

highlight ()

Highlight the Region. Used on mouseover.

select ()

Select the Region.

setDisabled (on, skipSetFill)

Disables the Region.

setFill (fill)

Sets fill color of the Region

Examples

region.setFill("#FF2233");
region.setFill("rgba(255,255,100,0.5");

setGaugeValue (val, null)

Set Region choropleth value. Used to calculate color of the Region.

setId (id)

Sets ID of the Region

setSelected ()

Selects the Region.

setStatus (status)

Sets status of the Region. Takes the list of statuses from global MapSVG options.

setTitle (title, id)

Sets ID of the Region

unhighlight ()

Unhighlight the Region. Used on mouseout.

update (options)

Updates the Region

Examples

var region = mapsvg.getRegion("US-TX");
region.update({
  fill: "#FF3322"
});