OL5.3 | GeoJSON with proj4

by Dennis Bauszus

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 100%;
  width: 100%;
}

JavaScript

const layerOSM = new ol.layer.Tile({
  source: new ol.source.OSM()
});

const featureCollection = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "coordinates": [
        [
          [
            [-91.0759333619999, 40.15440933399983],
            [-91.066378752, 40.154309680999823],
            [-91.066282352, 40.157927062999832],
            [-91.0751007809999, 40.157994385999814],
            [-91.0758658189999, 40.157997289999805],
            [-91.075866624, 40.157608482999827],
            [-91.0758737049999, 40.157300970999813],
            [-91.0759333619999, 40.15440933399983]
          ]
        ]
      ],
      "type": "MultiPolygon"
    }
  }]
};

const layerVector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(featureCollection, {
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    })
  })
});

const map = new ol.Map({
  target: 'map',
  controls: [],
  layers: [layerOSM, layerVector],
  view: new ol.View({
    center: [0, 0],
    zoom: 10
  })
});

map.getView().fit(
  layerVector.getSource().getExtent(),
  map.getSize());