JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openlayers.org/dev/examples/kml-layer.js"></script>
<b>City of Windsor Ward Boundries</b>
<div id="map-div" style="width:750px;height:530px;"></div>
<!-- Using City of Windsor Open Data : http://www.citywindsor.ca/003733.asp -->
<!-- shape files translated into kml using GeoConverter: http://geoconverter.hsr.ch/ -->
<!-- klm file hosted at http://aedileworks.com/2010_Municipal_Ward_Boundaries.kml" -->
<!-- klm example from: http://openlayers.org/dev/examples/kml-layer.html and http://openlayers.org/dev/examples/kml-layer.js -->
JavaScript
map = new OpenLayers.Map({
div: "map-div",
projection: new OpenLayers.Projection('EPSG:900913'),
'displayProjection': new OpenLayers.Projection('EPSG:4326')
});
var osm = new OpenLayers.Layer.OSM();
map.addLayer(osm);
var long = -83.011 ;
var lat = 42.291 ;
var centerlonlat = new OpenLayers.LonLat( long , lat );
centerlonlat=centerlonlat.transform(map.displayProjection, map.projection);
var zoom = 12;
map.setCenter(centerlonlat,zoom);
var map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.Vector("KML", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "http://aedileworks.com/2010_Municipal_Ward_Boundaries.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true,
maxDepth: 2
})
})
})
],
});