Skip to content

Instantly share code, notes, and snippets.

@PetteriVaarala

PetteriVaarala/index.html

Created November 19, 2011 17:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PetteriVaarala/1379118 to your computer and use it in GitHub Desktop.
Save PetteriVaarala/1379118 to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers & KML Highlight
Raw
index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>KML highlight</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body onload="init();">
<div id="map"></div>
</body>
<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
var lat = 65.2
var lon = 24.8
var zoom = 6;
var map;
var KML;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
//Initialise the 'map' object
function init() {
map = new OpenLayers.Map("map", {
controls: [],
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
maxResolution: 156543.0339,
numZoomLevels: 16,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
});
// Mapnik
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
numZoomLevels: 14
});
map.addLayer(layerMapnik);
// Local KML
KML = new OpenLayers.Layer.Vector("KML", {
projection: map.displayProjection,
strategies: [
new OpenLayers.Strategy.BBOX(),
],
protocol: new OpenLayers.Protocol.HTTP({
url: "sample.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
})
})
});
map.addLayer(KML);
// Highlight and Select controls
var report = function(e) {
OpenLayers.Console.log(e.type, e.feature.id);
};
var highlightCtrl = new OpenLayers.Control.SelectFeature(KML, {
hover: true,
highlightOnly: true,
renderIntent: "temporary",
eventListeners: {
beforefeaturehighlighted: report,
featurehighlighted: report,
featureunhighlighted: report
}
});
var selectCtrl = new OpenLayers.Control.SelectFeature(KML,
{clickout: true}
);
map.addControl(highlightCtrl);
map.addControl(selectCtrl);
highlightCtrl.activate();
selectCtrl.activate();
// Controls
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.PanZoomBar(), new OpenLayers.Pixel(0, 15));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
// Layer Switcher
var switcherControl = new OpenLayers.Control.LayerSwitcher();
map.addControl(switcherControl);
switcherControl.maximizeControl();
// Make sure map center is set
if (!map.getCenter()) {
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
map.setCenter(lonLat, zoom);
}
} //init()
</script>
</html>
Raw
sample.kml
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<Style id="red">
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
</Style>
<Style id="blue">
<LineStyle>
<color>ffff0000</color>
</LineStyle>
</Style>
<Placemark>
<name>Track 1</name>
<description>Red track</description>
<styleUrl>#red</styleUrl>
<LineString>
<coordinates>
25.0,66.0,0
29.0,65.0,0
</coordinates>
</LineString>
</Placemark>
<Placemark>
<name>Track 2</name>
<description>Blue track</description>
<styleUrl>#blue</styleUrl>
<LineString>
<coordinates>
23.0,63.0,0
28.0,64.0,0
</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment