Concepts
Get Started
- Pre-Requisites
- Install the NuGet Package
- Obtain Leaflet
- Obtain a License
- Initialize Mapzania
- Initialize Endpoints
- Adding a JavaScript Reference
- Add a Map to a Web Page
- Add Data to a Map
- Style a Map
- Further Reading
JavaScript Client
- Introduction
- Creating a Map Object
- Customize the Map Toolbar
- Map Events
- Mouse and Drawing Behaviour
- Map Extents
- Refresh/Reset the Map
- Working with Layers
- Displaying Layers
- Working with Layer Data
- Styling Layers
- Transforming Layers
- Working with Features
- Displaying Features
- Styling Features
- Working with the QueryEngine
DotNet Server
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.
