JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.7.0/ol.css">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
CSS
.map {
background: grey;
}
JavaScript
var styleFunction = (function () {
/* jshint -W069 */
var styles = {};
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({
color: 'orange',
width: 2
})
});
styles['Point'] = [new ol.style.Style({
image: image
})];
styles['Polygon'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})];
styles['MultiLinestring'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 3
})
})];
styles['MultiPolygon'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'yellow',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
})];
styles['default'] = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.1)'
}),
image: image
})];
return function (feature, resolution) {
return styles[feature.getGeometry().getType()] || styles['default'];
};
/* jshint +W069 */
})();
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPoint',
'coordinates': [
[-2e6, 0],
[0, -2e6]
]
}
}, {
'type': 'Feature',
'geometry':...