| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| 6 | <meta name="apple-mobile-web-app-capable" content="yes"> |
|---|
| 7 | <title>OpenLayers: Sundials on a Spherical Mercator Map</title> |
|---|
| 8 | <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> |
|---|
| 9 | <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> |
|---|
| 10 | <link rel="stylesheet" href="style.css" type="text/css"> |
|---|
| 11 | |
|---|
| 12 | <style type="text/css"> |
|---|
| 13 | html, body { |
|---|
| 14 | height: 100%; |
|---|
| 15 | } |
|---|
| 16 | #map { |
|---|
| 17 | width: 100%; |
|---|
| 18 | height: 80%; |
|---|
| 19 | border: 1px solid black; |
|---|
| 20 | } |
|---|
| 21 | .olPopup p { margin:0px; font-size: .9em;} |
|---|
| 22 | .olPopup h2 { font-size:1.2em; } |
|---|
| 23 | </style> |
|---|
| 24 | <script src="../lib/OpenLayers.js"></script> |
|---|
| 25 | <script type="text/javascript"> |
|---|
| 26 | var lon = 5; |
|---|
| 27 | var lat = 40; |
|---|
| 28 | var zoom = 5; |
|---|
| 29 | var map, select; |
|---|
| 30 | |
|---|
| 31 | function init(){ |
|---|
| 32 | var options = { |
|---|
| 33 | projection: new OpenLayers.Projection("EPSG:900913"), |
|---|
| 34 | displayProjection: new OpenLayers.Projection("EPSG:4326") |
|---|
| 35 | }; |
|---|
| 36 | map = new OpenLayers.Map('map', options); |
|---|
| 37 | var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)"); |
|---|
| 38 | var gmap = new OpenLayers.Layer.Google("Google", {sphericalMercator:true}); |
|---|
| 39 | var sundials = new OpenLayers.Layer.Vector("KML", { |
|---|
| 40 | projection: map.displayProjection, |
|---|
| 41 | strategies: [new OpenLayers.Strategy.Fixed()], |
|---|
| 42 | protocol: new OpenLayers.Protocol.HTTP({ |
|---|
| 43 | url: "kml/sundials.kml", |
|---|
| 44 | format: new OpenLayers.Format.KML({ |
|---|
| 45 | extractStyles: true, |
|---|
| 46 | extractAttributes: true |
|---|
| 47 | }) |
|---|
| 48 | }) |
|---|
| 49 | }); |
|---|
| 50 | |
|---|
| 51 | map.addLayers([mapnik, gmap, sundials]); |
|---|
| 52 | |
|---|
| 53 | select = new OpenLayers.Control.SelectFeature(sundials); |
|---|
| 54 | |
|---|
| 55 | sundials.events.on({ |
|---|
| 56 | "featureselected": onFeatureSelect, |
|---|
| 57 | "featureunselected": onFeatureUnselect |
|---|
| 58 | }); |
|---|
| 59 | |
|---|
| 60 | map.addControl(select); |
|---|
| 61 | select.activate(); |
|---|
| 62 | |
|---|
| 63 | map.addControl(new OpenLayers.Control.LayerSwitcher()); |
|---|
| 64 | |
|---|
| 65 | map.zoomToExtent( |
|---|
| 66 | new OpenLayers.Bounds( |
|---|
| 67 | 68.774414, 11.381836, 123.662109, 34.628906 |
|---|
| 68 | ).transform(map.displayProjection, map.projection) |
|---|
| 69 | ); |
|---|
| 70 | } |
|---|
| 71 | function onPopupClose(evt) { |
|---|
| 72 | select.unselectAll(); |
|---|
| 73 | } |
|---|
| 74 | function onFeatureSelect(event) { |
|---|
| 75 | var feature = event.feature; |
|---|
| 76 | var selectedFeature = feature; |
|---|
| 77 | var popup = new OpenLayers.Popup.FramedCloud("chicken", |
|---|
| 78 | feature.geometry.getBounds().getCenterLonLat(), |
|---|
| 79 | new OpenLayers.Size(100,100), |
|---|
| 80 | "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description, |
|---|
| 81 | null, true, onPopupClose |
|---|
| 82 | ); |
|---|
| 83 | feature.popup = popup; |
|---|
| 84 | map.addPopup(popup); |
|---|
| 85 | } |
|---|
| 86 | function onFeatureUnselect(event) { |
|---|
| 87 | var feature = event.feature; |
|---|
| 88 | if(feature.popup) { |
|---|
| 89 | map.removePopup(feature.popup); |
|---|
| 90 | feature.popup.destroy(); |
|---|
| 91 | delete feature.popup; |
|---|
| 92 | } |
|---|
| 93 | } |
|---|
| 94 | </script> |
|---|
| 95 | </head> |
|---|
| 96 | <body onload="init()"> |
|---|
| 97 | <h1 id="title">OSM + Google Maps + KML Reprojection</h1> |
|---|
| 98 | |
|---|
| 99 | <div id="tags"> |
|---|
| 100 | osm, kml, spherical, mercator, reprojection, feature, popup, advanced |
|---|
| 101 | </div> |
|---|
| 102 | |
|---|
| 103 | <p id="shortdesc"> |
|---|
| 104 | Demonstrates loading and displaying a KML file on top of OpenStreetMap (OSM) and Google Maps data. Loads data from a KML file of sundials. |
|---|
| 105 | </p> |
|---|
| 106 | |
|---|
| 107 | <div id="map" class="smallmap"></div> |
|---|
| 108 | |
|---|
| 109 | <div id="docs"></div> |
|---|
| 110 | </body> |
|---|
| 111 | </html> |
|---|
