OpenLayers 3 loading KML string
In this fiddle we're creating a vector layer from a KML string.
by mjerzak6
HTML
<script src="http://ol3js.org/en/master/build/ol-whitespace.js"></script>
<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css">
<div id="map" class="map"></div>
CSS
body {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
map {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
JavaScript
// Create Map
window.olMap = new ol.Map({
layers: [new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf',
imagerySet: 'Road'
})
})],
view: new ol.View2D({
zoom: 3,
center: [0, 0]
}),
renderer: 'canvas',
target: 'map'
});
// LOAD KML AS STRING
// This is a region in Southern Zambia
var kml = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.1"> <Document> <name>Campaign Map</name> <description>Blue shape lines</description> <Style id="blueLine"> <LineStyle> <color>ffff0000</color> <width>1</width> </LineStyle> <PolyStyle> <fill>false</fill> <color>00000000</color> </PolyStyle> </Style> <Placemark> <styleUrl>#blueLine</styleUrl> <Polygon> <outerBoundaryIs> <LinearRing> <altitudeMode>relative</altitudeMode> <coordinates>27.76190,-16.76667,0 27.77678,-16.72712,0 27.78716,-16.71236,0 27.82990,-16.68399,0 27.89357,-16.67339,0 27.98379,-16.62376,0 28.00903,-16.66806,0 28.04989,-16.69026,0 28.00104,-16.75421,0 27.97706,-16.76220,0 27.96462,-16.77730,0 27.92377,-16.78352,0 27.92821,-16.74000,0 27.86693,-16.76575,0 27.85194,-16.77552,0 27.83851,-16.78707,0 27.83351,-16.81116,0 27.81630,-16.83592,0 27.76190,-16.76667,0</coordinates> </LinearRing> </outerBoundaryIs> </Polygon> </Placemark> <Placemark> <styleUrl>#blueLine</styleUrl> <Polygon> <outerBoundaryIs> <LinearRing> <altitudeMode>relative</altitudeMode> <coordinates>27.86127,-16.82304,0 27.85849,-16.82315,0 27.83359,-16.81122,0 27.83853,-16.78718,0 27.85183,-16.77569,0 27.86693,-16.76587,0 27.92810,-16.74014,0 27.92366,-16.78296,0 27.92144,-16.78474,0 27.86127,-16.82304,0</coordinates> </LinearRing> </outerBoundaryIs> </Polygon> ...