Embedding a Mapworks Map
|Level of Experience||Basic|
|Time Required||15 min|
The strength of Mapworks is the ability for you to easily integrate a feature rich vector map into your current web applications via the map APIs.
This tutorial will walk through how to embed your map and will form the basis for all future tutorials.
Embeding Using iFrame
The easiest way to embed a map into your application is to use an iFrame via the Mapworks portal as described here. However, there are two limitations to this:
- This requires your map and all layers to be public, which means it will be visible to the whole world and discoverable through mapworks
Embedding Using HTML
This does a number of things
- It defines a div where where the map is going to be placed called "mapworks-map"
- It creates the map object with a given API key and Map ID
- It does some inital configuration of which default tools are available
Map Life Cycle
The Mapworks map goes through the following life cycle
- Map object creation - This is when new Studio.core.Map() is called and begins the setup of the map
- Map loaded - This is when the map object has been loaded into the DOM
- UI widgets loaded - After the map has been added to the DOM, the Studio widgets are loaded in and set up
- Map ready - This is when the layers have finished loading and the map API is ready to be used
- Map destroyed - This occurs either when the user navigates away from the page or when map.destroy() is called
Getting your Map ID
In order to embed you map, you need two things. The first is that you need the map ID that you want to display.
This is found by opening up your map through Mapworks and viewing the map info. You'll find the ID under "Unique Reference"
Generating an API Key
The second thing you'll need is an API key. For this you'll need to log into Mapworks as the admin user of your organisation.
At the top right. Click on the "Settings" button
Click on the "API Keys" tab on the left. That should give you a list of API keys you currently have.
Click "Create API Key"
Set the name of your API key and what maps or layers to be associated with the API key. Note that if your map includes private layers, you will need to include these layers as well.
Specify if the application can edit or only view the map using the API key. If you wish, you can also specify the allowed referrers for this API key
Once you're done, Click create and copy the API key into your application
Note that you don't need your map / layer to be public in order for it to be accessible through an API key.
This now provides you a map that you can directly interact with.