Map

This document section covers the use of the Map class, which is available globally as mapsvg.map.

CREATE, READ, UPDATE, DELETE

Read

When you need to get one or more of the created maps instances, you can do so via mapsvg global object.

Get map by index (in the order of creation):

const map_1 = mapsvg.get(0)
const map_2 = mapsvg.get(1)
const map_3 = mapsvg.get(3)

Get map by ID:

const map = mapsvg.getById(254)

Get all of the created maps:

const maps = mapsvg.instances

Create (by ID)

Create a new map from the settings previously created in MapSVG control panel, by providing the MAP_ID of the created map:

const map = new mapsvg.map(
              "html-conainer-id",
              {
                id: MAP_ID,
                options: {
                  loadingText: "Loading map...",
                },
              }
            )

When you use the code above, mapsvg will make a request to the server and get the SVG file and map options. It is essential to provide the loading message, to show it to the user while mapsvg loads data from the server.

Create (standalone)

Create a new standalone map, without connection to the server:

const map = new mapsvg.map(
              "html-conainer-id",
              {
                options: {
                  source: "path/to/file.svg"
                  loadingText: "Loading map...",
                },
              }
            )

Update

When the map is created, you can update any options using the update method:

map.update({
  zoom : {
    on: true
  }
})

It is equivalent to calling the corresponding setter method:

map.setZoom({on: true});

Destroy

map.destroy()

Events

You can listen to the map events by using the mapsvg.events.on() method:

map.events.on("zoom", (event) => {
  const { map, data } = event
  console.log("map zoomed to " + map.zoomLevel);
})

Turn off all or one event handlers:

map.events.off("zoom")
// or, remove event handler created previously:
map.events.on("zoom", eventHandler)
map.events.off("zoom", eventHandler)