SMK Usage Guide

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

This project is maintained by qqnluaq

SMK

SMK Examples

Assumptions

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

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

                margin: 0;
                padding: 0;
            }
        </style>
    </head>

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

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>

https://example.com/demo?

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>

https://example.com/demo?

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;}}"
></script>

https://example.com/demo?

Setup 2C

<script src="smk.js"
    smk-config="map-config.json"
></script>

https://example.com/demo?

Setup 2D

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

https://example.com/demo?

Result 2

Discussion 2

Example 3

Loading a layer.

Setup 3A

<script src="smk.js"
    smk-config="map-config.json|wms-layer.json|show-tool=layers"
></script>

https://example.com/demo?

Setup 3B

<script src="smk.js"
    smk-config="map-config.json|show-tool=layers"
></script>

https://example.com/demo?

Setup 3C

<script src="smk.js"
    smk-config="map-config.json"
></script>

https://example.com/demo?

Result 3

Discussion 3

Example 4

Setting location of map.

Setup 4A

<script src="smk.js"
    smk-config="victoria.json"
></script>

https://example.com/demo?

Setup 4B

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

https://example.com/demo?

Setup 4C

<script src="smk.js"
    smk-config="ll=-123.65114,48.53077|z=10"
></script>

https://example.com/demo?

Setup 4D

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

https://example.com/demo?

Setup 4E

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

https://example.com/demo?

Setup 4F

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

https://example.com/demo?

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"
    smk-config="victoria.json|?foo-"
></script>

https://example.com/demo?

Setup 5B

<script src="smk.js"
    smk-config="?foo-|victoria.json"
></script>

https://example.com/demo?

Setup 5C

<script src="smk.js"
    smk-config="kamloops.json|?foo-"
></script>

https://example.com/demo?

Setup 5D

<script src="smk.js"
    smk-config="?"
></script>

https://example.com/demo?

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"
    smk-config="show-tool=all"
></script>

https://example.com/demo?

Setup 6B

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

https://example.com/demo?

Setup 6C

<script src="smk.js"
    smk-config="?smk-|show-tool=about,baseMaps,coordinate,identify,layers"
></script>

https://example.com/demo?

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"
    smk-config="show-tool=scale|{&quot;tools&quot;:[{&quot;type&quot;:&quot;scale&quot;,&quot;showFactor&quot;:false}]}"
></script>

https://example.com/demo?

Setup 7B

<script src="smk.js"
    smk-config="show-tool=scale|?smk-"
></script>

https://example.com/demo?

Setup 7C

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

https://example.com/demo?

Result 7

Example 8

Running an ad-hoc query.

Setup 8A

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

https://example.com/demo?

Setup 8B

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

https://example.com/demo?

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.