JSFiddle - React, Tailwind, and code Playground

by nickspacek

HTML

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

JavaScript

var parcelsUrl = 'http://geonb.snb.ca/arcgis/rest/services/GeoNB_SNB_Parcels/MapServer';
var numbersUrl = 'http://geonb.snb.ca/arcgis/rest/services/GeoNB_SNB_Civic_Address/MapServer'

var layers = [
  new ol.layer.Tile({
    source: new ol.source.OSM()
  }),
  new ol.layer.Image({
    source: new ol.source.ImageArcGISRest({
      ratio: 1,
      params: {},
      url: parcelsUrl
    })
  }),
  new ol.layer.Image({
    source: new ol.source.ImageArcGISRest({
      ratio: 1,
      params: {},
      url: numbersUrl
    })
  })
];
var map = new ol.Map({
  layers: layers,
  target: 'map',
  view: new ol.View({
    center: [-7420148, 5780099],
    zoom: 16
  })
});