User Manual

Add a Map to a Web Page

To add a map to your web-page, firstly include a reference to the JavaScript endpoint as per the highlighted code in the example below.

NOTE: See Adding a JavaScript Reference for a more detailed discussion on how the JavaScript resource works.


<head>
	...
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
	<script src="~/mz/scripts/js"></script>
	...
</head>

Secondly, add an element to host the map as per the example below:


...
<div id="map-div" style="position:absolute;top:10px;left:10px;bottom:40px;right:10px;"></div>
...

Activate the map in your JavaScript code:


<script type="text/javascript">
    window.onload = function () {
        var map = new Mapzania.Map("map-div","LONDON");
    }
</script>

You will now see a grayscale map of the center of London.

NOTE: The reason that the background image of London appears on your map is that Mapzania has a built-in layer-source called "OSM Tiles", that provides map tiles from [Open Street Maps] (http://www.openstreetmap.org). Layer-sources are covered in more detail in the Add Data to a Map section.

For more information on the Map object used above, see the Javascript Library Documentation.