GEO INFORMATIE (9)

  - - - - - -

Voorbeelden van scripts voor het plaatsen van een kaart op internet

3D weergave wijk

Google

1. Vraag een Google map API nummer aan.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org R/xhtml1/DTD/xhtml1-<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example< itle>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;
 key=<INSERT MAPS API KEY HERE>" <script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(40,-98), 4);
var geoXml = new GGeoXml("<INSERT GEOSERVER URL HERE>/
geoserver/wms/reflect?layers=map.addOverlay(geoXml);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

2. Maak een html pagina (bv. ggmaps.html)

3. Vul de verkregen API sleutel en de geoserver URL in de html code in

4. Bezoek de "ggmaps.html" pagina op de server met uw browser

5. De versie van Google maps API dient 2.x te zijn, geen 2.

 

Yahoo Maps

1. Vraag een Yahoo Maps Application ID aan http://search.yahooapis.com/webservices/register_application

2. Maak een html pagina bv. ymap.html

<html>
<head>
<title>Yahoo! Maps GeoRSS Overlay Example< itle>
<script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=<INSERT APPLICATION ID HERE>"
      type="<script type="text/javascript" language="JavaScript">
function StartYMap() {
var map = new YMap(document.getElementById('ymap'));
map.addPanControl();
map.addZoomShort();
function doStart(eventObj) {
var defaultEventObject = eventObj;
562 Chapter 17. Tutorials
GeoServer User Manual, Release 2.1.3
//eventObj.ThisMap [map object]
//eventObj.URL [argument]
//eventObj.Data [processed input]
}
function doEnd(eventObj) {
var defaultEventObject = eventObj;
//eventObj.ThisMap [map object]
//eventObj.URL [argument]
//eventObj.Data [processed input]
map.smoothMoveByXY(new YCoordPoint(10,50));
}
YEvent.Capture(map,EventsList.onStartGeoRSS, function(eventObj)
     { doStart(eventObj); YEvent.Capture(map,EventsList.onEndGeoRSS,
function(eventObj) { doEnd(eventObj); });
map.addOverlay(new YGeoRSS('http://<INSERT GEOSERVER URL HERE>/geoserver/wms/reflect?}
window.onload = StartYMap;
</script>
</head>
<body>
<div id="ymap" style="width: 800px; height: 600px; left:2px; top:2px"></div>
</body>
</html>

3. Vul de verkregen API sleutel en de URL van de geoserver in de html code in

4. Bezoek de pagina op de server met uw browser

5. De API van Yahoo dient ten minste v. 3.0 te zijn.

 

Microsoft Virtual earth

1. Vraag een API sleutel bij Microsoft aan

2. Maak een html pagina "ms.html"

3. Voer de API sleutel en de geoserver URL in

4. Bekijken via de locale computer gaat niet, u dient deze op de webserver te downloaden

NB.

GeoRSS overlays worden alleen met Internet Explorer browser versie 5.5 en hoger ondersteund.

<html>
<head>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
var map;
function OnPageLoad()
{
map = new VEMap('map');
map.LoadMap();
var veLayerSpec = new VELayerSpecification();
17.2. GeoRSS 563
GeoServer User Manual, Release 2.1.3
veLayerSpec.Type = VELayerType.GeoRSS;
veLayerSpec.ID = 'Hazards';
veLayerSpec.LayerSource = 'http://<INSERT GEOSERVER URL HERE>/
                 geoserver/wms/reflect?layers=states&veLayerSpec.Method = 'get';
map.AddLayer(veLayerSpec);
}
</script>
</head>
<body onload="OnPageLoad();">
<div id="map" style="position:relative;width:800px;height:600px;"></div>
</body>
</html>

- -- - - - - - - - - - - - - slot

www.3dontwerpen.nl - www.ontmoeting.nl - www.architectuur.alfazet.nl