Skip to content

Examples

Jump to bottom
Kushan Joshi edited this page May 13, 2018 · 1 revision

Table of Contents

Simple Example

You can simple use idly-gl directly from the CDN unpkg and put it in your HTML page.

Head over to mapbox-gl documentation in case you aren't familiar with it.

<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://unpkg.com/idly-gl@latest/dist/idly-gl.js'></script>
    <style>
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'your mapbox access token';
        var map = new mapboxgl.Map({
            style: 'mapbox://styles/mapbox/satellite-v9',
            center: [-74.0066, 40.7135],
            zoom: 18.5,
            hash: true,
            container: 'map'
        });
        var idly = new IdlyGl.default();
        map.addControl(idly);
    </script>
</body>
</html>

Using with module Bundlers (Webpack, Rollup, etc)

If you have a modern javascript application, you can use npm to install idly-gl and then import it like any other npm module. Visit API.md

npm install --save idly-gl
import IdlyGl from 'idly-gl';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl';

mapboxgl.accessToken = '<access_token>';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/satellite-v9',
});

map.addControl(new idlygl.IdlyGlPlugin());

Using Bing satellite map

You can also use Bing's satellite imagery instead of the mapbox-gl satellite, which might have better coverage in certain parts of the world.

<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://unpkg.com/idly-gl@latest/dist/idly-gl.js'></script>
    <style>
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = new mapboxgl.Map({
            style: {
                version: 8,
                sprite: 'https://maps.tilehosting.com/styles/basic/sprite',
                glyphs: 'https://maps.tilehosting.com/fonts/{fontstack}/{range}.pbf.pict?key=alS7XjesrAd6uvek9nRE',
                sources: {
                    'raster-tiles': {
                        type: 'raster',
                        tiles: [
                            'https://ecn.t0.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
                            'https://ecn.t1.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
                            'https://ecn.t2.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
                            'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z',
                        ],
                    },
                },
                layers: [
                    {
                        id: 'simple-tiles',
                        type: 'raster',
                        source: 'raster-tiles',
                        minzoom: 0,
                        maxzoom: 22,
                    },
                ],
            },
            center: [-74.0066, 40.7135],
            zoom: 18.5,
            hash: true,
            container: 'map'
        });
        var idly = new IdlyGl.default();
        map.addControl(idly);
    </script>
</body>
</html>

Using with mapillary or any third part vector tile source

<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script src='https://unpkg.com/idly-gl@latest/dist/idly-gl.js'></script>
    <style>
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'your mapbox access token';
        var map = new mapboxgl.Map({
            style: 'mapbox://styles/mapbox/satellite-v9',
            center: [-74.0066, 40.7135],
            zoom: 18.5,
            hash: true,
            container: 'map'
        });

        map.on('load', function () {
            // Add Mapillary sequence layer.
            // https://www.mapillary.com/developer/tiles-documentation/#sequence-layer
            map.addLayer({
                "id": "mapillary",
                "type": "line",
                "source": {
                    "type": "vector",
                    "tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
                    "minzoom": 6,
                    "maxzoom": 14
                },
                "source-layer": "mapillary-sequences",
                "layout": {
                    "line-cap": "round",
                    "line-join": "round"
                },
                "paint": {
                    "line-opacity": 0.6,
                    "line-color": "rgb(53, 175, 109)",
                    "line-width": 2
                }
            });

            var idly = new IdlyGl.default({
                map: {
                    // render idly-gl under mapillary layer
                    beforeLayer: "mapillary"
                }
            });
            map.addControl(idly);
        });
    </script>
</body>
</html>
Clone this wiki locally