Embed the Jersey Public Map

Jersey Public Mapping

This service is designed to allow registered users to embed the public map into their own websites using the ESRI JavaScript API.

Scope

This document is intended for web developers who wish to use the Public Mapping service. It assumes familiarity with JavaScript but limited knowledge of ESRI ArcGIS products and concepts.

Quick Start

Firstly, you’ll need to register with Digimap to obtain the public mapping service URL and to be notified when updates are deployed in future. The use of ID tokens may be also introduced in the future.

Secondly, you’ll need to include the ESRI JavaScript API in your page, add a DOM element to contain the map view and write some JavaScript to activate the mapping. One thing to note is that the DOM element should be styled with size information otherwise the map may not display correctly (or indeed at all!)

The mapping data is in a standard projection which supports coordinates in longitude and latitude format and a number of zoom levels. The ESRI JavaScript API handles requesting the correct mapping tiles and displaying them within the specified DOM element on the page.

When the mapping data is updated a new service URL may be generated.

An example html page is included at the end of this document.

ESRI JavaScript API

The API is built on Dojo ( https://dojotoolkit.org/ ) which contains a number of features similar to other toolkits (e.g. JQuery). One important aspect is the use of Asynchronous module definition (AMD – https://en.wikipedia.org/wiki/Asynchronous_module_definition ) to load features on the fly.

In practice this simply means you’ll need to house any ESRI specific code within “require” blocks.

The API provides a number of features and widgets to customise the mapping view and full documentation is available from their developer site (https://developers.arcgis.com/javascript/).

To display a map on the page, you need the following

Basemap. This defines the spatial reference (which coordinate / projection system is used), initial extent and available zoom levels. ESRI provide shortcuts to a number of built in basemaps which cover the whole globe. In our case we will demonstrate a custom basemap using just the Jersey data.
Map object. This contains the basemap and any additional feature layers in use.
A MapView component to display a view of a map object within a DOM element. We will be using a 2d map view, but there are 3d options too.

The API supports various feature layers for displaying GIS data and graphics, but we are only going to cover one type for this example:

TileLayer. You create a TileLayer object using a tile service URL from an ArcGIS server. We will use one to create a custom basemap but you can create other layers from tile services and overlay them using the map object API. Tiled layers are similar to services like google maps and are fast, however they have fixed zoom/scale levels.

The process for displaying a map with a custom basemap is shown in the example, but in brief.

Create a TileLayer from the service URL
Create a Basemap using the TileLayer
Create a Map using the Basemap
Create a MapView using the Map

As shown in the example page, you can specify an initial zoom and CenterPoint for the map view. There is a “home” widget in the API which you can enable to allow the user to return to the initial extent after panning/zooming the map and a “compass” widget to reset north if you decide to enable map rotation.

The ESRI documentation is detailed and they provide examples for many features alongside an online sandbox to experiment with.

Example HTML Code

<!DOCTYPE html>

<head>

<title>Jersey public mapping example</title>

<style>

body {

background-color: #555;

font-family: Arial,”Helvetica Neue”,Helvetica,sans-serif;

}

#mainPage {

background-color: white;

border: 1px solid #AB9B7D;

width: 90%;

min-width: 300px;

max-width: 700px;

padding: 16px;

text-align: justify;

position: absolute;

left: 0;

right: 0;

margin: 16px auto auto auto;

}

#viewDiv {

border: 1px solid #AB9B7D;

overflow: hidden;

min-width: 400px;

min-height: 500px;

}

h3 {

text-align: center;

}

</style>

//Stores the map object for future use

var map = null;

//Load the required ESRI modules

require([“esri/Map”, “esri/views/MapView”, “esri/Basemap”, “esri/layers/TileLayer”, “dojo/domReady!”], function(Map, MapView, Basemap, TileLayer) {

//Create a tiled layer using the Public Mapping Service URL

var publicMappingLayer = new TileLayer({

url: “http://tiles.arcgis.com/tiles/2V6UBtY4hQyxLsAp/arcgis/rest/services/States_of_Jersey_Public_Map/MapServer”,

id: “publicMappingTiledLayer”

});

//Create a custom baseMap using the Public Mapping tiled layer

var publicMappingBasemap = new Basemap({

baseLayers: [publicMappingLayer],

title: “Public Mapping Basemap”,

id: “publicMappingBasemap”

});

//Create a map using our custom baseMap

map = new Map({

basemap: publicMappingBasemap,

id: “publicMap”

});

//Create a 2d view to display the map on the page

var view = new MapView({

constraints:

{rotationEnabled: false}, // Optional. Disable map rotation when dragging with the right mouse button. If enabled, activate the compass widget too

zoom: 12, // Optional. Initial zoom scale to use (Check the ranges supported by the map service)

center: [-2.134,49.213], // Optional. Center the view at this lon,lat position

container: “viewDiv”, // Required. The ID of a DOM element where the map view will be drawn

map: map // Required. The map object to display in this view

});

</script>

</head>

<body>

<h3>Jersey public mapping example</h3>

Please refer to the <a href=”https://developers.arcgis.com/javascript/” target=”_blank”>ArcGIS API for JavaScript</a> site for additional documentation.<br/>

<br/>

</div>

</body>

</html>