-
Notifications
You must be signed in to change notification settings - Fork 24
Tutorial: a basic map
This tutorial demonstrates how to put a fully functional map on a web page.
Below you see the contents of a simple html file. In fact, it is one of the demo pages you can find in the MapQuery distribution. The file can have any name, but let us assume it is called map.html.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>MapQuery hello world!</title>
<script src="../lib/openlayers/OpenLayers.js" type="text/javascript"></script>
<script src="../lib/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../src/jquery.mapquery.core.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#map').mapQuery({layers:[{type:'osm'}]}); //initialise mapquery with an OSM layer
});
</script>
<style type="text/css">
.map {
height:512px;
width:512px;
float:left;
clear:left;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</body>
</html>
Opening this map in a web browser should give you a map containing OpenStreetMap data. You can use your mouse to pan the map and use the scroll wheel to zoom in or out.
The html file consists of two main parts, the <head> section and the <body> section. The body section contains the page contents. We see we need only to define a <div> element:
<div id="map" class="map"></div>
The <div> element should have an ID, so we can reference it from the javascript code. The <div> element also has a CSS class reference (class="map"). This is used to set the size and position of the <div> element containing the map.
The <head> section contains statements to execute the libraries we need:
<script src="../lib/openlayers/OpenLayers.js" type="text/javascript"></script>
<script src="../lib/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script src="../src/jquery.mapquery.core.js" type="text/javascript"></script>
Note that the jQueryUI library is not needed in this example because we only use the map widget.
The actual application code is also in the <head> section:
$(document).ready(function() {
$('#map').mapQuery({layers:[{type:'osm'}]}); //initialise mapquery with an OSM layer
});
In this case it is only three lines, bit for larger appliation you will probably want to put all javascript code in a separate file.
Putting a map in the page is done with the statement $('#map').mapQuery({layers:[{type:'osm'}]}. First we select the <div> element with the ID "map", then we create the map widget in it. There are many options to initialise a map, but in this example they are not specified, so we use default values. The only intialisation parameter we use is a specification of the layers in the map. In this case we have one layer: the OpenSteetMap map.