

<!-- local_vflibs/openlayersframe -->
<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
    <style>
        .map {
            height: 100%;
            width: 100%;
        }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>{{pagetitle}}</title>
</head>
<body>
<div id="map" class="map"></div>

<script type="text/javascript">
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
            source: new ol.source.OSM()
        })],
        view: new ol.View({
            center: ol.proj.fromLonLat([{{lng}}, {{lat}}]),
            zoom: {{zoom}}
        })
    });

    // Set markers.
    var markerslayer = new OpenLayers.Layer.Vector("labels");
    map.addLayer(markerlayer);

    var lonLatlabel, pointlabel, featurepoint, featureicon;

    {{#markers}}
    lonLatlabel = new OpenLayers.LonLat({{lng}}, {{lat}}).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    );

    pointlabel = new OpenLayers.Geometry.Point(lonLatlabel.lon, lonLatlabel.lat);
    featurepoint = new OpenLayers.Feature.Vector(
        pointlabel, null, {label:"{{title}}",fontColor:"blue"}
    );
    markerslayer.addFeatures([featurepoint]);

    featureicon = new OpenLayers.Feature.Vector(
        pointlabel, null, {src:"{{iconurl}}",
                            anchor: [0.5, 46],
                            anchorXUnits: 'fraction',
                            anchorYUnits: 'pixels',
                            opacity: 0.75}
     );

    markerslayer.addFeatures([featureicon]);
    {{/markers}}

</script>
</body>
</html>
<!-- /local_vflibs/openlayersframe -->