getMapsVector

Method Name:

getMapsVector

This method returns Vector map tiles in MVT format. YAML files can be applied to MVT response to get themed maps. Three themes are provided to choose from: Bronze, Iron and Steel.

Parameters


Parameter	Description	Usage
latitude	Latitude of central point of initial map view. (WGS 84 datum/EPSG:4326 coordinate system).	Required
longitude	Longitude of central point of initial map view. (WGS 84 datum/EPSG:4326 coordinate system).	Required
zoom	Zoom Level of initial map view	Required
eleId	ID of Map 'DIV' in HTML	Required
mapStyle	Theme to be applied to map. Possible values are: Bronze (Default), Iron and Steel.	Optional

Returns:

Gets Bronze, Iron or Steel styled basemap MVT vector tiles.

Sample Code:

<!---------------- Vector sdk code sample ------------------->

<!DOCTYPE html>
<html>
	<head>	
		<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@0.7.7/dist/leaflet.css" />

		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
		<script src="https://unpkg.com/leaflet@0.7.7/dist/leaflet.js"></script>
		<script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>

		<script src="PreciselySDK-9.5.0-min.js"></script>
		<script>
			function callMapsVector(){
				var GM = new PRECISELYAPIS_V1.maps();
				var Maps = GM.getMaps({latitude:40.761819, longitude:-73.997533, zoom:12}, 'responseMapDiv');
				GM.getMapsVector(Maps, 'iron');
			}
		</script>			
	</head>
	<body>
		<h1>Maps SDK Test Page</h1>		
		<button type="button" onclick="callMapsVector();">Maps (Vector)</button> 	
		<div style="position: relative; width: 1000px; height: 400px;">
			<div id="responseMapDiv"></div>
		</div>
	</body>
</html>

Setting a Theme at Client Side:

To style vector basemaps, YAML files are required that can be found in resources folder of Maps Javascript SDK.

bronze.yaml (mapStyle parameter as 'bronze')
iron.yaml (mapStyle parameter as 'iron')
steel.yaml (mapStyle parameter as 'steel')

If a theme is not specified in mapStyle parameter, bronze theme is applied by default .

After downloading, provide your {api_key} in the YAML file as shown in the YAML snippet below:

sources:
    mapzen:
        type: MVT
        url: https://api.precisely.com/maps/v1/tile/osm/{z}/{x}/{y}.mvt?api_key={api_key}