JSFiddle - React, Tailwind, and code Playground

by Timothy Lucas

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css">
<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<div id="map"></div>
<button id="pop-up-name">Pop-Up with Name</button>
<button id="find-sim-name">Find Features with Similar Name</button>

CSS

html., body, #map {
    padding: 0;
    margin-left:0;
    width: 100%;
    height: 90%;
}

JavaScript

var projection = ol.proj.get('EPSG:3857');

//This center does not work for some reason
 var Alkmaar = ol.proj.transform([4.75355239868168, 52.62976657605367], 'EPSG:4326', 'EPSG:3857');

//Define styles and function to use in styles

var view = new ol.View({
    center: Alkmaar,
    zoom: 17,
    projection: projection
});

//Define Styles for the Layer1 (red points)


var redCircle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,1)'
        }),
        stroke: new ol.style.Stroke({color: 'red', width: 1})
    })
});

var greenCircle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
            color: 'rgba(0,255,0,1)'
        }),
        stroke: new ol.style.Stroke({color: 'green', width: 1})
    })
});


var blueCircle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({
            color: 'rgba(0,0,255,1)'
        }),
        stroke: new ol.style.Stroke({color: 'blue', width: 5})
    })
});

var styles1 = {
    'Point': [redCircle],
    'SelectedPoint' : [blueCircle]
};

var styleFunction1 = function(feature, resolution) {
    if (feature.get("type")) {
      return styles1[feature.get("type")];
    }
    return styles1["Point"];
};


var styles2 = {
    'Point': [greenCircle],
    'SelectedPoint' : [blueCircle]
};

var styleFunction2 = function(feature, resolution) {
    if (feature.get("type")) {
      return styles2[feature.get("type")];
    }
    return styles2["Point"];
};


// Layers

var Layer1 = new ol.layer.Vector({
  source: new ol.source.GeoJSON({
      projection: 'EPSG:3857',
      object : '{"type":"FeatureCollection","crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::3857"}},"features":[{"type":"Feature","properties":{"OBJECTID":1,...