SMK Usage Guide

A versatile and lightweight toolkit for building a simple web map.

This project is maintained by bcgov


SMK Examples


For the following examples, the reader should assume the following:

    |-- index.html
    |-- smk-config.json
    |-- victoria.json
    |-- kamloops.json
    |-- wms-layer.json
    |-- wms-layer-attributes.json
    |-- wms-layer-query.json
    |-- smk.js
    '-- images
        '-- (SMK images)
        <!-- ------------------------------------------------
            The examples specify the SMK <script> element
            that is to be inserted here.
        ------------------------------------------------- -->
            #smk-map-frame {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;

                margin: 0;
                padding: 0;

    <body id="smk-map-frame"></body>

The examples will provide a setup that gives the <script> element and the parameters for URL that is being requested. The URL parameters (if any) are presented in a list for ease of reading, and the URL is linked to the properly formatted URL.

The complete request is formatted as a standard URL (though without any spaces around ? and &):

[host and path] ? [argument1] & [argument2] && [argumentN]

If multiple setups are provided for an example, it is asserted that they all have exactly the same effect.

Example 1

Using default configuration.

Setup 1A

<script src="smk.js"></script>

Result 1

Discussion 1

The <script> element doesn’t specify a map configuration file, so the default configuration it used.

Example 2

Loading configuration from a URL.

Setup 2A

<script src="smk.js"></script>

Setup 2B

<script src="smk.js"
    smk-config="show-tool=baseMaps|hide-tool=markup|{&quot;name&quot;:&quot;Test App&quot;,&quot;viewer&quot;:{&quot;baseMap&quot;:&quot;Streets&quot;}}"

Setup 2C

<script src="smk.js"

Setup 2D

<script src="smk.js"></script>

Result 2

Discussion 2

Example 3

Loading a layer.

Setup 3A

<script src="smk.js"

Setup 3B

<script src="smk.js"

Setup 3C

<script src="smk.js"

Result 3

Discussion 3

Example 4

Setting location of map.

Setup 4A

<script src="smk.js"

Setup 4B

<script src="smk.js"></script>

Setup 4C

<script src="smk.js"

Setup 4D

<script src="smk.js"></script>

Setup 4E

<script src="smk.js"></script>

Setup 4F

<script src="smk.js"></script>

Result 4

Example 5

Changing URL parameter prefix. The default URL parameter prefix is smk-, but this can be changed. You may want the parameters processed by SMK to be prefixed with foo- for example. The URL parameters can be processed before or after other configuration specified in the smk-config attribute.

Setup 5A

<script src="smk.js"

Setup 5B

<script src="smk.js"

Setup 5C

<script src="smk.js"

Setup 5D

<script src="smk.js"

Result 5

Discussion 5

The order of configuration sources in smk-config attribute is important. URL parameters that don’t match the prefix are ignored. The URL parameter prefix can be empty.

Example 6

Enabling tools.

Setup 6A

<script src="smk.js"

Setup 6B

<script src="smk.js"></script>

Setup 6C

<script src="smk.js"

Result 6

Discussion 6

The all tool stands for all tools. The order of tools that tools are enabled doesn’t control their position.

Example 7

Configuring tools.

Setup 7A

<script src="smk.js"

Setup 7B

<script src="smk.js"

Setup 7C

<script src="smk.js"></script>

Result 7

Example 8

Running an ad-hoc query.

Setup 8A

<script src="smk.js"></script>

Setup 8B

<script src="smk.js"></script>

Result 8

Discussion 8

The ad-hoc URL parameter query definitions only allow a subset of possible query structures. The ad-hoc URL parameter query also controls the tool active at startup, and uses a special configuration to execute query immediately. For this query, the conjunction could be ‘and’ or ‘or’, as there is only one predicate.