Simple Extent Sharing for your Map App

arcgis

Demo
Source

A common request for web map applications is to have some sort of bookmark function. Bookmarks are just a quick way of jumping to a saved extent or view for your map and they are usually presented as a list of meaningful names. This is fine when you are using an application but what if you just want a way of sharing an extent with someone or creating a permalink of your extent / view. Here’s a very quick and easy way to do it for the Esri JS API using the window.location.hash.

We only need to do 2 things for this. First, since we want to know the extent we need to hook into the map extent-change event and update the location.hash. Second, when we start the app we need to check the location.hash and if an extent is there then set the map extent accordingly. That’s it!

Here’s the entire code for the functionality and a live demo. The source for the demo is on GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
define([
    'esri/geometry/Extent',
    'dojo/_base/lang',
    'dojo/_base/declare',
    'dojo/on',
    'dojo/_base/json',
    'dojo/dom'],
    function (
        Extent,
        lang,
        declare,
        on,
        dojo,
        dom
    ) {
        return declare('joosh.Bookmarker', null, {
            map: null,
            constructor: function (params) {
                lang.mixin(this, params);
                if (this.map) {
                    if (window.location.hash) {
                        var hashExtent = dojo.fromJson('{' + window.location.hash.replace('#', '') + '}');
                        var savedExtent = new Extent(
                        {
                            xmin: hashExtent.xmin,
                            ymin: hashExtent.ymin,
                            xmax: hashExtent.xmax,
                            ymax: hashExtent.ymax,
                            spatialReference: this.map.spatialReference
                        });
                        this.map.setExtent(savedExtent);
                    }
                    this.map.on('extent-change', function (e) {
                        window.location.hash =
                            "xmin:" + e.extent.xmin +
                            ",ymin:" + e.extent.ymin +
                            ",xmax:" + e.extent.xmax +
                            ",ymax:" + e.extent.ymax;
                    });
                }
            }
        });
    });

Now to enable this you need

1
2
3
4
5
this.map = new Map('map', config.options);
require(['joosh/Bookmarker'], function (Bookmarker) {
    new Bookmarker({ map: this.map});
});