Step 1 your map


This section creates the basic map layout for your web site.  


Important Note:


The web-map builder sessions will time-out after 2 hours (unsaved work will be lost), so please save your work regularly by going to Step 4, press collect code then save code. We will store the code for you, so you can always come back later to edit your map, at any time.


All of the widgets e.g. search tool are placed directly onto the map except the small map, which will not allow these widgets to be added because of its size.  


What you see in the web-map builder window is what your viewers will see on the screen when they open the map on your web site. For example, when you save the map, the zoom level and location preferences as seen in the web-map builder will be automatically embedded in the final web page code that you collect.


Do you want your map to be small, medium or large? This will depend on how much space you want it to take up in a web page or whether you want to add your own content such as a route or text within a marker. Try out different sized maps after you have added markers and routes and see how it looks. The zoom control is automatically adjusted to the size of the map window.


Small map 250 x 300 pixels; Medium map; 350 x 400 pixels; Large map; 440 x 550


The Overview map provides a wider area perspective. The hashed box in the overview map represents the size of the map window. Users can drag this around to another location.



Grid-coordinates of the cursor in Eastings / Northings and Longitude / Latitude



The search box will allow users of your web site to find a location using a place name, postcode, or postcode sector. The place name search uses Ordnance Survey's 1:50 000 scale gazetteer product. It contains entries for towns, settlements, airports, farms, hills, woodlands, commons, and other places. In addition, a search can be done using either a full postcode e.g. "SO16 4GU" or "SO164GU" or a sector e.g. "S016". It uses Ordnance Survey's Code-Point® product.





Step 2 - Add markers


This section allows you to add location markers to your map and then to insert text, images and URL links into the popup window.


Select Add markers to map then select a colour and style of marker:




Click on the map where you'd like the marker to be added.



To add text, images or a URL link to the pop-up marker window, select Add content/drag markers:



Tip: If you need to move the marker, just hold and drag the marker to a different position.


Click on any marker to add content to that marker. The editor will open:




If you want to add text, type or copy it into the editor window. Highlight the text if you want to format it then click the Bold or Italic button.



When you have finished adding your text, click the Save marker info button. The editor will close.



To see how the content looks in the marker, click View markers as they will appear on your map,



and then click on the marker to open the pop up window.



To delete a marker, select Delete individual markers. Click on the marker you want to remove:




To add an image select Add content / drag markers and select a marker to open the editor.  



Click the image icon to open the image properties:



This tab refers to the "Image Info"

You may lock the image proportions by pressing Image:Lock_image.pngor you can return to the original image size by pressing Image:Image_return.png.

Pressing "OK" inserts the image with the specified properties.

When you have finished adding your image, click the Save marker info button. The editor will close.

To see how the content looks in the marker, click View markers as they will appear on your map,  



and then click on the marker to open the pop up window.

Image: © Copyright Jeff Buck and licensed for reuse under a Creative Commons Licence.

You may want to allow users to click on an image or text that opens up a new popup window. This could contain a link to another website, YouTube video or an enlarged copy of the image.

To add a hyperlink to text or images, in the editor, highlight the image or text that you want to link from:

Press Image:Link.gifbutton on the toolbar. A popup window called "Link" will appear.

 Insert the relevant paremeters.




Select  and then .



To see how the link looks in the marker, click View markers as they will appear on your map,  and then click on the image in the marker popup window:





Step 3 - Add routes


You can add as many routes as you like.



To start, click on the map. A green start flag will appear;



Continue to make your route by clicking on the map:



When you have finished your route, double click the map. A finish flag will appear:



Circular routes : If you want to create a circular route that starts and finishes at the same point, create a route as above,

but instead finish the route by double clicking the start flag. The following information will appear:


Click OK to create the circular route with a combined start and end coloured flag:



If after you have finished creating a route, you want to edit it, select:



Select a route by clicking somewhere along the route. The start and end flags will temporarily disappear, and edit circles will appear along the route:



Drag the edit circles to alter the route:



When you have finished editing routes at any stage, select:



The route will now be changed:









To select and delete individual routes select:



Click on the route to highlight it. You will be prompted just to be sure:




You can also reverse the start and end markers. Select:



Click on the route to reverse it:




Step 4 - Generate and save code


When you have finished designing and adding content to your map, you can collect the entire html code to copy into your web site editor or save it in your hard drive. Your API key that we sent to you when you registered for OpenSpace will be automatically inserted into the code.


To use the code, you will need to know a little bit about updating website pages. Simply copy the code directly into your html editor or web page.





This is an example part of the generated code:



If you would like us to save your code as well, select:




This means that next time you log into web-map builder, your last saved version will be displayed for you ready to edit. If you make any changes, just copy and paste the new code into your website again.


To copy the generated html code, right click on your mouse and select all. Use the copy function and then paste into your web site editor or text editor.


To save the generated code on your hard drive as an .html file:


1. Select all, copy

2. Open your text editor

3. Paste into the text editor

4. Save as a .html file;-




The saved html code can be simply uploaded to your web server and you will see the contents of the map that you created. Alternativley, additional web site content can be built around this page. A WYSIWYG visual html editor may be useful to do this. Another option is to insert the code into a page that you have already created - see forum tutorials for more information.