BUILD ONTARIO

CartoDB Basemaps

Complete list: https://carto.com/help/building-maps/basemap-list/

Positron with labels: URL: https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png

Positron without labels: URL: https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png

Own Base Map

An OpenStreetMap vector tileset for Ontario is available (2.5 GiB). The tiles are generated on zoom levels 1 to 14, but can be overzoomed to level 18+. Vector tiles contain selection of OpenStreetMap data – following the OpenMapTiles schema, compatible with the open styles.

Install the MapTiler server software to you run the maps on your own infrastructure and to generate traditional raster tiles compatible with Leaflet or standard map services for desktop GIS.

Alternatives

We may *simply* use MapTiler’s My Cloud basic maps:

  • Basic
  • Basic WSG84 (EPSG4236) – not in the commonly-used “Web Mercator” and, so might require more complicated setup of your application (see the examples). We’d used WSG84 projection in converting the Shapefiles to GeoJSON.

Basic WSG84

Embeddable Viewer

Insert the following code into your page and use this map:

https://api.maptiler.com/maps/basic-4326/?key=d0BnvJrHJ9GbrfIkGjKn#0.0/11.25000/0.00000

Embedding with an iframe is the simplest way:

<iframe width=”500″ height=”300″ src=”https://api.maptiler.com/maps/basic-4326/?key=d0BnvJrHJ9GbrfIkGjKn#0.0/11.25000/0.00000″></iframe>

Use vector style

JavaScript viewers – check one of the prepared examples:

Copy link to JSON style into OpenLayers, Mapbox GL JS or mobile SDKs:

https://api.maptiler.com/maps/basic-4326/style.json?key=d0BnvJrHJ9GbrfIkGjKn

OpenLayers

OpenLayers is a full featured web mapping library that allows you to display maps from various sources and formats.

Vector tiles can be displayed in OpenLayers using the ol-mapbox-style plugin together with OpenMapTiles.

See also OpenLayers examples and the full API Specification.

Examine the sample code and use the buttons in the top-right corner to copy the code or edit in jsFiddle:

<!DOCTYPE html>
<html>
<head>
<script src=”https://cdn.maptiler.com/ol/v6.0.0/ol.js”></script>
<script src=”https://cdn.maptiler.com/ol-mapbox-style/v5.0.2/olms.js”></script>
<link rel=”stylesheet” href=”https://cdn.maptiler.com/ol/v6.0.0/ol.css”>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id=”map”></div><p><a href=”https://www.maptiler.com/copyright/” target=”_blank”>&copy; MapTiler</a> <a href=”https://www.openstreetmap.org/copyright” target=”_blank”>&copy; OpenStreetMap contributors</a></p>
<script>
var projection = ‘EPSG:4326’;

var tileGridOpts = {“extent”: [-180, -90, 180, 90], “minZoom”: 0, “sizes”: [[2, 1], [4, 2], [8, 4], [16, 8], [32, 16], [64, 32], [128, 64], [256, 128], [512, 256], [1024, 512], [2048, 1024], [4096, 2048], [8192, 4096], [16384, 8192]], “tileSizes”: [[512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512], [512, 512]], “resolutions”: 1};
var tilegrid = new ol.tilegrid.TileGrid(tileGridOpts);

var viewResolutions = tileGridOpts.resolutions.concat();
var overzoomLevels = 3;
while (overzoomLevels– > 0) {
viewResolutions.push(viewResolutions[viewResolutions.length – 1] / 2);
}

var map = new ol.Map({
layers: [],
target: ‘map’,
view: new ol.View({
constrainResolution: true,
projection: projection,
resolutions: viewResolutions,
center: ol.proj.transform([0, 0.00010], ‘EPSG:4326’, projection),
zoom: 0
})
});

fetch(‘https://api.maptiler.com/maps/basic-4326/style.json?key=d0BnvJrHJ9GbrfIkGjKn’)
.then(function(response) { return response.json() })
.then(function(style) {
var mapExtent = tileGridOpts.extent;
var center = style.center;
if (!center || center.length < 2) {
var bounds = ol.proj.transformExtent(mapExtent, projection, ‘EPSG:4326’);
center = [
bounds ? bounds[0] + (bounds[2] – bounds[0]) / 2 : 0,
bounds ? bounds[1] + (bounds[3] – bounds[1]) / 2 : 0
];
}

Object.keys(style.sources).forEach(function(sourceId) {
var source = style.sources[sourceId];
if (source && source.url) {
fetch(source.url)
.then(response => response.json())
.then(tileJSON => {
let zIndex = style.layers.findIndex(l => l.source == sourceId);

if (source.type == ‘vector’) {
var layer = new ol.layer.VectorTile({
zIndex: zIndex,
declutter: true,
extent: mapExtent,
source: new ol.source.VectorTile({
attributions: tileJSON.attribution,
format: new ol.format.MVT(),
projection: projection,
tileGrid: tilegrid,
urls: tileJSON.tiles
})
});

olms.applyStyle(layer, style, sourceId, undefined, viewResolutions)
.then(function() {
map.addLayer(layer);
});
} else if (source.type == ‘raster’) {
var layer = new ol.layer.Tile({
zIndex: zIndex,
extent: mapExtent,
source: new ol.source.XYZ({
projection: projection,
attributions: tileJSON.attribution,
tileGrid: tilegrid,
urls: tileJSON.tiles
})
});
map.addLayer(layer);
}
});
}
});
olms.applyBackground(map, style);

map.getView().setCenter(ol.proj.transform([center[0], center[1]], ‘EPSG:4326’, projection));
map.getView().setZoom(style.zoom || tileGridOpts.minZoom || 0);
});
</script>
</body>

Digging Deeper into OpenLayers

https://openlayers.org/download/

The ol package

The recommended way to use OpenLayers is to work with the ol package. You can install the latest with npm:

npm install ol

Hosted builds for development

If you want to try out OpenLayers without downloading anything (not recommended for production), include the following in the head of your html page:

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
Downloads for the v6.5.0 release
Archive Description
v6.5.0-dist.zip Includes a full build of the library (ol.js), a source map (ol.js.map), and library CSS (ol.css with source map ol.css.map).
v6.5.0.zip Includes all of the above plus examples, API docs, and sources.

https://openlayers.org/en/latest/doc/tutorials/bundle.html

Modern JavaScript works best when using and authoring modules. The recommended way of using OpenLayers is installing the ol package. This tutorial walks you through setting up a simple dev environment, which requires node for everything to work.

In this tutorial, we will be using Parcel to bundle our application. There are several other options, some of which are linked from the README.

Initial steps

Create a new empty directory for your project C:\ol\new-project.  In cli, navigate to \new-project and initialize the project with

npm init

This will create a package.json file in your working directory. Add OpenLayers as dependency to your application with

npm install ol

At this point you can ask NPM to add required development dependencies by running

npm install --save-dev parcel-bundler

Application code and index.html

Place your application code in index.js. Here is a simple starting point:

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

You will also need an index.html file that will use your bundle. Here is a simple example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

Creating a bundle

With two additional lines in package.json you can introduce the commands npm run build and npm start to manually build your bundle and watch for changes, respectively. The final package.json with the two additional commands "start" and "build" should look like this:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC"
}

That’s it. Now to run your application, enter

npm start

in your console. To test your application, open http://localhost:1234/ in your browser. Whenever you change something, the page will reload automatically to show the result of your changes.

Note that a single JavaScript file with all your application code and all dependencies used in your application has been created. From the OpenLayers package, it only contains the required components.

To create a production bundle of your application, simply type

npm run build

and copy the dist/ folder to your production server.

x

  1. 3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125, 0.00034332275390625, 0.000171661376953125, 8.58306884765625e-05, 4.291534423828125e-05