Table Of Contents
Previous topic
Welcome to GeoAdmin API’s documentation!
Welcome to GeoAdmin API’s documentation!
This step by step tutorial will show you how to add a map in any web page in 2 minutes.
At the end of this tutorial you will have a map like this in you browser.
Create an empty web page map.html and place it in your localhost developpement environnement. Check that you can call it with http://localhost/map.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My very first GeoAdmin Map</title>
</head>
<body>
<h1>This is my very first map</h1>
</body>
</html>
Add a script tag to load the API. This script will load all the necessary JavaScript and CSS code to create the map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My very first GeoAdmin Map</title>
</head>
<body>
<h1>This is my very first map</h1>
<script type="text/javascript" src="https://api.geo.admin.ch/loader.js"></script></body>
</body>
</html>
In the header section of your HTML page, place a JavaScript function which creates one map.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My very first GeoAdmin Map</title>
<script type="text/javascript">
function init() {
var geo = new GeoAdmin.API();
geo.createMap({
div: "mymap1",
easting: 720000,
northing: 90000,
zoom: 5
});
}
</script>
</head>
<body>
<h1>This is my very first map</h1>
<script type="text/javascript" src="https://api.geo.admin.ch/loader.js"></script></body>
</body>
</html>
In the body section of your web page, add a <div> with id=”mymap1”. The map will be rendered within the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My very first GeoAdmin Map</title>
<script type="text/javascript">
function init() {
var geo = new GeoAdmin.API();
geo.createMap({
div: "mymap1",
easting: 720000,
northing: 90000,
zoom: 5
});
}
</script>
</head>
<body>
<h1>This is my very first map</h1>
<div id="mymap1" style="width:500px;height:340px;border:1px solid grey;padding: 0 0 0 0;margin:10px !important;"></div>
<script type="text/javascript" src="https://api.geo.admin.ch/loader.js"></script></body>
</body>
</html>
And finally, tell the web page to execute the JavaScript function you defined by adding onload=”init()” in the body tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My very first GeoAdmin Map</title>
<script type="text/javascript">
function init() {
var geo = new GeoAdmin.API();
geo.createMap({
div: "mymap1",
easting: 720000,
northing: 90000,
zoom: 5
});
}
</script>
</head>
<body onload="init();">
<h1>This is my very first map</h1>
<div id="mymap1" style="width:500px;height:340px;border:1px solid grey;padding: 0 0 0 0;margin:10px !important;"></div>
<script type="text/javascript" src="https://api.geo.admin.ch/loader.js"></script></body>
</body>
</html>
And test it in your web browser: http://localhost/map.html
You can have a look at the API Examples, explore the API Doc or experiment with the fantastic API Generator.