Load WFS and use stylemap with external graphic
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>
<p id="demo"></p>
CSS
#map {
width: 400px;
height: 400px;
border: 1px solid #dddddd;
}
.Panel2 {
width: 18px;
height: 54px;
cursor: pointer;
right: 10px;
top: 74px;
}
.firstItemInactive, .secondItemInactive {
background: #30d5c8;
border: 2px solid #075f67;
width: 18px;
height: 18px;
}
.firstItemActive, .secondItemActive {
background: #ffffdd;
border: 2px solid #dddddd;
width: 18px;
height: 18px;
}
JavaScript
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET","http://geodata.nationaalgeoregister.nl/ahn2/wfs?request=getCapabilities", false);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}