isabella232 / tegola-web-demo

Tegola Web Demo

This repo contains a web page demonstrating the rendering of a map utilizing Tegola for vector tile delivery.

Configuration

In the root of this repo, there is an config.json file which defines the styles, rendering libraries, locations, and sources to be displayed.

The following is an example JSON configuration:

{
	"start":{
		"z":15,
		"lng":-117.15117725013909,
		"lat":32.72269876352742,
		"bear":0,
		"pitch":0,
		"style":"hot-osm",
		"map":"ec2",
		"lib":"mapbox"
	},
    "styles":[{
    	"key":"hot-osm",
    	"label":"HOT OSM",
    	"tileSrc":"images/hot-osm.png",
    	"mapboxStyle":"styles/hot-osm3d.json",
    	"olStyle":"styles/hot-osm.json",
        "host":"http://demo.tegola.io"
    },{
    	"key":"camo",
    	"label":"Camo",
    	"tileSrc":"images/camo.png",
    	"mapboxStyle":"styles/camo3d.json",
    	"olStyle":"styles/camo.json",
        "host":"http://demo.tegola.io"
    },{
    	"key":"night-vision",
    	"label":"Night",
    	"tileSrc":"images/night-vision.png",
    	"mapboxStyle":"styles/night-vision3d.json",
    	"olStyle":"styles/night-vision.json",
        "host":"http://demo.tegola.io"
    }],
    "srcs":[{
        "key":"ec2",
        "label":"EC2",
        "sources":{
            "osm":{
                "url":"https://osm-lambda.tegola.io/v1/capabilities/osm.json",
                "type":"vector"
            },
            "satellite":{
                "url":"https://api.tiles.mapbox.com/v4/digitalglobe.nal0g75k/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGlnaXRhbGdsb2JlIiwiYSI6ImNqNWIyMHkxdzBmNGczNG55bGNhc2tlcncifQ.lQXsl-GCFgJWmIKEeaRpPg",
                "type":"raster",
                "attribution":"© DigitalGlobe, Inc"
            }
        }
    }],
    "libs":[{
    	"key":"mapbox",
    	"label":"Mapbox",
    	"library":"mapbox"
    },{
    	"key":"ol",
    	"label":"Open Layers",
    	"library":"ol"
    }],
    "locs":[{
        "key":"sd",
        "label":"San Diego",
        "lat":32.72,
        "lng":-117.15,
        "z":11
    },{
        "key":"la",
        "label":"Los Angeles",
        "lat":34.04,
        "lng":-118.31,
        "z":11
    },{
        "key":"sf",
        "label":"San Francisco",
        "lat":37.77,
        "lng":-122.40,
        "z":11
    }]
}

The following sections describe each of the configuration parameters in more detail.

Start (start)

The start JSON configuration defines the properties of the map on initial load (if not overwritten by query variables).

• z - defines the starting zoom of the map based on the zoom levels in the Mapbox rendering library (Open Layers zoom value is one higher than Mapbox's for the same viewport)
• lng - defines the longitude value of the center of the map (web mercator 3857 projection)
• lat - defines the latitude value of the center of the map (web mercator 3857 projection)
• bear - the Mapbox value for the rotation of the map, if not defined will default to 0
• pitch - the Mapbox value for the tilt of the map, if not defined will default to 0
• style - defines the initial style to be used to render the map, this style value must match the key of one of the styles defined later in the config JSON
• src - defines the initial source to be used to render the map, this source value must match the key of one of the sources defined later in the config JSON
• lib - defines the initial renderer to be used to render the map, this renderer value must match the key of one of the renderers defined later in the config JSON

Styles (styles)

The styles JSON configuration defines the styles which can be used to style the map. Styles is an array of style options to be populated in the page to be selected by the user. Each style is defined by the following properties:

• key - a unique identifier for the style. Use the same key in the start config to render the map with this style initially.
• label - what will show up in the interface to represent this style.
• tileSrc - path to the tile image that will be presented alongside the label.
• mapboxStyle - path to the Mapbox style json which defines how the map will be styled. Ensure that the style json matches the source, layers, and features defined in the source.
• olStyle - path to the Mapbox style json which defines how the map will be rendered with Open Layers. Note that the olStyle json is in Mapbox style format. It is converted using ol-mapbox-style.
• host - defines the domain host of the resources within the style JSON file. This may be overwritten by styleHost defined in the URL query to allow for localhost development.

Sources (srcs)

The srcs JSON configuration defines the Tegola sources which will deliver vector tile information for the map to render. Sources is an array of source options to be populated in the page to be selected by the user. Each source is defined by the following properties:

• key - a unique identifier for the source. Use the same key in the start config to render the map with this source initially.
• label - what will show up in the interface to represent this source.
• sources - a map of style sources to overwrite the ones in the json stylesheet.
  • key - source key to overwrite.
  • url - path to the source endpoint.
  • type - supported types are raster and vector.
  • attribution - if defined will pass the attribution to the rendering library.

Rendering Libraries (libs)

The libs JSON configuration defines the Tegola renderers which will render vector tiles in the map. Renderers is an array of options that may be selected by the user to render the map. There are two possible renderer options, mapbox and ol.

• key - a unique identifier for the renderer. Use the same key in the start config to render the map with this renderer initially.
• label - what will show up in the interface to represent this renderer.
• library - may be either mapbox or ol.
• accessToken - if using Mapbox styles, define the access token to be able to request styles from the Mapbox API.

Locations (locs)

The locs JSON configuration defines locations that the user may jump to in the interface.

• key - a unique identifier for the location.
• label - what will show up in the interface to represent this location.
• lat - the latitude of the location.
• lng - the longitude of the location.
• z - the zoom of the location

State (Query)

The state of the map is stored in the URI to allow for sharing of links that will recreate the map. The query state parameters are defined below:

• z - defines the zoom of the map based on the zoom levels in the Mapbox rendering library (Open Layers zoom value is one higher than Mapbox's for the same viewport)
• lng - defines the longitude value of the center of the map (web mercator 3857 projection)
• lat - defines the latitude value of the center of the map (web mercator 3857 projection)
• bear - the Mapbox value for the rotation of the map, if not defined will default to 0
• pitch - the Mapbox value for the tilt of the map, if not defined will default to 0
• style - defines the style to be used to render the map, this style value must match the key of one of the styles defined in the config JSON
• src - defines the source to be used to render the map, this source value must match the key of one of the sources defined in the config JSON
• lib - defines the renderer to be used to render the map, this renderer value must match the key of one of the renderers defined in the config JSON
• styleHost - overwrites the default host defined in the config in the json stylesheets, facilitates local sourcing of styling resources. Example, add (&) styleHost=http://localhost (or local path to style resources) to the end of the URL query string to request resources from localhost.

Clear the query (everything after the ? in the URL) to restore the start settings of the map.