Embed Maps into Your Website

From GeoMonkey Wiki
Jump to: navigation, search


Embedding Maps

Once you have created a map, populated it with data, and published it, you are ready to embed it into your own website. This page will walk you through the process of embedding a map into your personal website.

If you have any problems, or questions not answered by this tutorial, please visit the GeoMonkey Forums.

Publishing your Map

Before embedding a map into a webpage, we must first make sure it is published. Publishing the map will share it, so that others can see the map you've made. If you've already published your map, you can skip down to the next section, Creating an Embed Configuration.

First, we need to open our map in the Map Editor, and select the Map Settings Tool in the Map Tool Pane.

If you have not yet given the map a title, set a default view, and added keywords, you'll need to do that now. Clicking Give this map a title or Add a few keywords will open the Map Editor About Menu to set the appropriate options. To Set a default view for the map, set the map's view to nicely frame your items, then click Set a default view. The publish globe should appear once these fields are set, and you are now ready to publish your map.
Clicking on the publish globe will present you with an option. You can publish to the public so everyone can see, or you can publish to your group members. To embed the map into your webpage, we'll need to set this to Public and click Submit.
The lock icon underneath the globe should be unlocked, and set to Public now.

Creating an Embed Configuration

Once you've created a public map, we are just about ready to embed it. Click the Embed this map link underneath the map. If we haven't set a configuration, we will need to do that now. If you have already set a configuration, you can select it and proceed to the next section, #Embedding Your Map.

If you haven't set the configuration, you can do that now. The first thing you'll want to do is set a title, but each of the options is described in detail below.

Note that if you change a configuration, it will change all maps that are already embedded using that configuration. Or, put another way, if you want to update the configuration of the map, you will only need to edit the configuration that map uses, and you won't need to change anything on your own website.

Set the title of this configuration. We can use this same configuration later by selecting the title from the Choose a configuration drop down menu.

There are a few options to customize the layout. They are listed below.

Page Bar
If the page bar option is unchecked, the Page Bar at the top of the map will not appear (this bar shows items visible). If deselected, none of the Layout options will affect your map. It is recommended that you turn of all layout options if you disable the Page Bar.
Login Bar
This will allow users to login to MapWithUs through your map. This will be useful to users embedding Group maps.
View Pane
This option toggles the View Pane button in the top left of the map. The view option will allow users to switch between overlays on your map.
Tool Pane
The Tool Pane option toggles the Tool Pane button. The Tool Pane will all users to add new items to your map.
Search Pane
This will reveal the Find button, allowing users to search through the items on your map using keywords.
Color Scheme

We can set the color scheme for the map here. We can choose between several presets, we can specify a custom color scheme using hex values.


Here we can specify which controls show up on our map. Each control is explained in more detail below.

Toggle Navigation controls, and set them to full or custom.
Map Overview
Toggles the Map Overview.
Map Types
Enables and disables the Map Type drop down menu.
Right Click Directions
Enables your users to get directions by right clicking items on the map.
Save New Configuration
Once you have set the options how you want them, click Save Configuration to save it. Any maps using this configuration will be automatically implement the updated settings.

Embedding Your Map

Once a configuration has been set, you are ready to insert the map into your own HTML. Look for the Copy this code field at the bottom of the configuration window. Select the text inside that field, and copy it into your website in the appropriate place.

That's it! Your map should now load onto your website. If you want to change the configuration, all you need to do is edit the configuration you used to post the map.