brittharr/mapboxgl.html

## mapboxgl.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map-container { position:absolute; width:100%; height:626px; border:1px solid #000; border-width:1px 0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #mini-map { position:absolute; left:20px; bottom:20px; width:20%; height:40%; border:4px solid #f0f0f0; box-shadow:1px 1px 1px 1px #f0f0f0; }

        /* mapbox overwrites based on BL styleguide */
        .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin: 20px 0 0 20px; }
        .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 20px 20px; }
        .mapboxgl-ctrl-top-right .mapboxgl-ctrl { margin: 20px 20px 0 0; }
        .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 20px 20px 0; }
    </style>
</head>
<body>

<div id="map-container">
    <div id='map'></div>
    <div id="mini-map"></div>
</div>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<script>
mapboxgl.accessToken = 'xyz';

/* Options */
var mapZoom = 7,
    miniMapZoomFactor = 0.45,
    mapCenter = [0,0],
    styleUrl = 'mapbox://styles/xyz',
    pattern = 'slashes-3';

var map = new mapboxgl.Map({
        container: 'map', // container id
        style: styleUrl, //stylesheet location
        center: mapCenter, // starting position
        zoom: mapZoom, // starting zoom
        minZoom: 1.1,
        maxZoom: 11
    }),
    minimap = new mapboxgl.Map({
        container: 'mini-map', // container id
        style: styleUrl, //stylesheet location
        center: mapCenter, // starting position
        zoom: mapZoom * miniMapZoomFactor, // starting zoom
        attributionControl: false,
        interactive: false
    });

map.addControl(new mapboxgl.Navigation({position: 'top-left'}));

map.on('style.load', function () {
    map.addSource('polygonData', {
        'type': 'geojson',
        /* geojson.io */
        'data': {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'properties': {},
                    'geometry': {
                        'type': 'Polygon',
                        'coordinates': [[]]
                    }
                }
            ]
        }
    });

    map.addLayer({
        'id': 'route',
        'type': 'fill',
        'source': 'polygonData',
        'layout': {},
        'paint': {
            'fill-pattern': pattern
        }
    });
});

map.on('move', setMiniMap);

function setMiniMap() {
    /* Using existing data source, update map polygon location/size etc. in minimap */
    var mapBounds = map.getBounds().toArray(),
        mapCenter = map.getCenter(),
        mapZoom = map.getZoom();
    minimap.getSource('mapBoundaries').setData({
        "type": "Feature",
        "properties": {
            "name": "Map Boundaries"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [[[mapBounds[0][0],mapBounds[0][1]],
                [mapBounds[1][0],mapBounds[0][1]],
                [mapBounds[1][0],mapBounds[1][1]],
                [mapBounds[0][0],mapBounds[1][1]]]]
        }
    });
    minimap.setCenter(mapCenter);
    minimap.setZoom(mapZoom * miniMapZoomFactor);
}

minimap.on('style.load', function () {
    /* On initial minimap load, add data source and fill polygon for map */
    var mapBounds = map.getBounds().toArray();
    minimap.addSource('mapBoundaries', {
        'type': 'geojson',
        'data': {
            'type': 'Feature',
            'properties': {
                'name': 'Map Boundaries'
            },
            'geometry': {
                'type': 'Polygon',
                'coordinates': [[[mapBounds[0][0],mapBounds[0][1]],
                    [mapBounds[1][0],mapBounds[0][1]],
                    [mapBounds[1][0],mapBounds[1][1]],
                    [mapBounds[0][0],mapBounds[1][1]]]]
            }
        }
    });
    minimap.addLayer({
        'id': 'route',
        'type': 'fill',
        'source': 'mapBoundaries',
        'layout': {},
        'paint': {
            'fill-pattern': pattern // This pattern has to be in the mapbox://styles used
        }
    });
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map-container { position:absolute; width:100%; height:626px; border:1px solid #000; border-width:1px 0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	#mini-map { position:absolute; left:20px; bottom:20px; width:20%; height:40%; border:4px solid #f0f0f0; box-shadow:1px 1px 1px 1px #f0f0f0; }

	/* mapbox overwrites based on BL styleguide */
	.mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin: 20px 0 0 20px; }
	.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 20px 20px; }
	.mapboxgl-ctrl-top-right .mapboxgl-ctrl { margin: 20px 20px 0 0; }
	.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 20px 20px 0; }
	</style>
	</head>
	<body>

	<div id="map-container">
	<div id='map'></div>
	<div id="mini-map"></div>
	</div>

	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
	<script>
	mapboxgl.accessToken = 'xyz';

	/* Options */
	var mapZoom = 7,
	miniMapZoomFactor = 0.45,
	mapCenter = [0,0],
	styleUrl = 'mapbox://styles/xyz',
	pattern = 'slashes-3';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: styleUrl, //stylesheet location
	center: mapCenter, // starting position
	zoom: mapZoom, // starting zoom
	minZoom: 1.1,
	maxZoom: 11
	}),
	minimap = new mapboxgl.Map({
	container: 'mini-map', // container id
	style: styleUrl, //stylesheet location
	center: mapCenter, // starting position
	zoom: mapZoom * miniMapZoomFactor, // starting zoom
	attributionControl: false,
	interactive: false
	});

	map.addControl(new mapboxgl.Navigation({position: 'top-left'}));

	map.on('style.load', function () {
	map.addSource('polygonData', {
	'type': 'geojson',
	/* geojson.io */
	'data': {
	'type': 'FeatureCollection',
	'features': [
	{
	'type': 'Feature',
	'properties': {},
	'geometry': {
	'type': 'Polygon',
	'coordinates': [[]]
	}
	}
	]
	}
	});

	map.addLayer({
	'id': 'route',
	'type': 'fill',
	'source': 'polygonData',
	'layout': {},
	'paint': {
	'fill-pattern': pattern
	}
	});
	});

	map.on('move', setMiniMap);

	function setMiniMap() {
	/* Using existing data source, update map polygon location/size etc. in minimap */
	var mapBounds = map.getBounds().toArray(),
	mapCenter = map.getCenter(),
	mapZoom = map.getZoom();
	minimap.getSource('mapBoundaries').setData({
	"type": "Feature",
	"properties": {
	"name": "Map Boundaries"
	},
	"geometry": {
	"type": "Polygon",
	"coordinates": [[[mapBounds[0][0],mapBounds[0][1]],
	[mapBounds[1][0],mapBounds[0][1]],
	[mapBounds[1][0],mapBounds[1][1]],
	[mapBounds[0][0],mapBounds[1][1]]]]
	}
	});
	minimap.setCenter(mapCenter);
	minimap.setZoom(mapZoom * miniMapZoomFactor);
	}

	minimap.on('style.load', function () {
	/* On initial minimap load, add data source and fill polygon for map */
	var mapBounds = map.getBounds().toArray();
	minimap.addSource('mapBoundaries', {
	'type': 'geojson',
	'data': {
	'type': 'Feature',
	'properties': {
	'name': 'Map Boundaries'
	},
	'geometry': {
	'type': 'Polygon',
	'coordinates': [[[mapBounds[0][0],mapBounds[0][1]],
	[mapBounds[1][0],mapBounds[0][1]],
	[mapBounds[1][0],mapBounds[1][1]],
	[mapBounds[0][0],mapBounds[1][1]]]]
	}
	}
	});
	minimap.addLayer({
	'id': 'route',
	'type': 'fill',
	'source': 'mapBoundaries',
	'layout': {},
	'paint': {
	'fill-pattern': pattern // This pattern has to be in the mapbox://styles used
	}
	});
	});
	</script>

	</body>
	</html>