JSFiddle - React, Tailwind, and code Playground

by itsyahani

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css">
<script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
<div id="map" class="map"></div>

JavaScript

var projection = 'EPSG:3857';
    var extent = [4971973.402832299, 4532068.135419386, 5603377.554611745, 5363254.812111423];
    var view = new ol.View({
        projection: 'EPSG:3857',
        center: [5349567.78300059, 4924957.731035946],
        extent: extent,
        maxResolution: 196543.0339,
        zoom: 7.5,
        minZoom: 7.5,
        maxZoom: 18
    });
     var osm = new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'osm'})
    });
    var map = new ol.Map({
        renderer: 'canvas',
        target: 'map',
        layers: [osm],
        view: view
    });
    
    map.on("singleclick", singleClickCB);
    function singleClickCB(event) {
        var features = [];
        map.forEachFeatureAtPixel(event.pixel, function(feature, layer) {
          features.push(feature);
        });
        if (features) {

            var i;
           for (i = 0; i < features.length; ++i) {
                alert(features[i].get('title'));
            }
        }
    } ;
    
     //add Feature 

    var featureVectorSource = new ol.source.Vector();
    var featureClusterSource = new ol.source.Cluster({
        source: featureVectorSource,
    });
    var featureVectorLayer = new ol.layer.Vector({
        source: featureVectorSource,
        style: new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    map.addLayer(featureVectorLayer);


    var addfeature = function (index, geom, title) {
        var feautFeature = new ol.Feature({
            geometry: geom,
            rownum: index,
            title: title,
        });
       ...