ThinkGeo Cloud Maps
Vector Tiles

The ThinkGeo Cloud Maps Vector Tile service delivers planetwide coverage of street and POI data in a layered hierarchy with infinite styling possibilities.
 

Cloud-Based Vector Tile Service

ThinkGeo's Cloud Maps Vector Tile Service offers highly-detailed map data covering the entire world, delivered in a lightweight vector-based format that's built for speed. Vector tiles are styled on the client side, making delivery ultra-fast and giving you live control over the look and feel of every map. Our vector data comprises over 1.2 billion features worldwide and is organized into distinct layers.

The live map below consumes vector tiles in real-time from the ThinkGeo Cloud. You can control the visibility of individual layers and switch the map style from Light to Dark mode on the fly.

Use ctrl + scroll to zoom the map

To access ThinkGeo Cloud Maps Vector Tiles, you'll need a ThinkGeo account and a ThinkGeo Cloud API key which you'll use to authenticate your tile requests. Don't have a ThinkGeo account? Start building today and get a free 60-day evaluation of all ThinkGeo Cloud services, including Raster Tiles, Geocoding, Reverse Geocoding, Elevation and WMS.

Whole-Planet Coverage

More than 1.2 billion vector features cover the whole surface of the Earth, even minor outlying islands.

Lightweight Binary Format

ThinkGeo Maps vector tiles are encoded as Google Protobufs (pbf), an ultra-efficient format for serializing structured data that makes tile delivery ultra-fast.

Multi-Language Metadata

Besides the native language, many features are available with embedded metadata in English, Chinese, Arabic, German and more, allowing you or your customers to control the linguistic appearance of your maps.

Continually Updated

We source our vector tile data from multiple open-source projects including OpenStreetMap, enabling us to keep our cloud-based vector tile service up to date on a continuous schedule.

 

Vector Map Tile Features

Land cover, administrative boundaries, roads, places, buildings and much more.

DATA SOURCES

More Than 1.2 Billion Features

OpenStreetMap & Natural Earth. Map Suite Vector Tile Data sources from OpenStreetMap and Natural Earth, both of which are open data sets. The data is updated continually on ThinkGeo servers keep with the latest data available. Generally speaking, Natural Earth is used at lower zoom levels, and OpenStreetMap is serving for higher zoom levels.

Multi-language. Map Suite Vector Tile Data includes all language variants of the name_* values to enable full internationalization.

Clearly legible hierachy. Features are highly organized into multiple data layers, presenting a clearly legible hierarchy.

DATA SOURCES
VECTOR TILE

THE VECTOR ADVANTAGE

Vector Tiles Let You Draw Better Maps

What is a Vector Tile? Instead of a web server sending you a pre-drawn image tile, a vector tile contains the geometry for a particular part of the earth, delivered on demand. It contains instructions on what can be drawn, rather than something already drawn and styled.

Why Vector Tiles? Vector tiles allows for more efficient downloads and more rapid map updates than pre-rendered raster tiles that you might be used to. When changes are made to the data, rather than waiting for an image tile to be redrawn, only the coordinates and drawing instructions for that particular building or road need to be updated. Depending on the URL syntax, vector tiles can return all of the data, or just individual layers, or combinations of layers, including water, earth, landuse, roads, buildings and points of interest.

CLIENT SUPPORT

Compatible with Your Favorite Client Technology

VectorMap.js A JavaScript library based on OpenLayers for creating interactive, customizable vector maps into web browsers. It takes the map styles created following Map Suite StyleJSON Specification, applies them to vector tiles (.mvt, .geoJson, topoJson) to create awesome maps using HTML5 Canvas or WebGL.     Learn More

ThinkGeo UI Controls A suite of mapping developer components to help you rapidly build mapping apps on multiplatform.    Learn More

More Clients & Applications Awesome implementations of Vector Tiles from other providers, including clients on different platforms, applications/command line tools etc.    Learn More

Open Source Supported

Cloud-Based GIS Server

ThinkGeo Cloud can be accessed from anywhere using simple RESTful web requests, so you can serve up great looking maps, or provide routing or geocoding to a variety of client applications.
More Details Start Building

Always Online

No Infrastructure to Maintain

Simple Transaction Model

 

See How It Works

Seamlessly with any programming languages, in any iOS, Android, Web and desktop applications.
Use ctrl + scroll to zoom the map
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vector Tiles | ThinkGeo</title>
    <link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.0-beta012/vectormap.css" >
    <style type="text/css">
        #map{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdn.thinkgeo.com/vectormap-js/2.0.0-beta012/vectormap.js"> </script>
    <script src="https://cdn.thinkgeo.com/vectormap-icons/1.0.0/webfontloader.js"> </script>
    <script type="text/javascript">
        WebFont.load({
            custom: {
                families: ["vectormap-icons"],
                urls: ['https://cdn.thinkgeo.com/vectormap-icons/2.0.0-beta004/vectormap-icons.css']
            }
        });
        var map = null;
        map = new ol.Map({
            layers: [
                new ol.mapsuite.VectorTileLayer('https://cdn.thinkgeo.com/worldstreets-styles/1.0.0-beta007/light.json', {
                    'apiKey': 'Your apiKey',
                })
            ],
            target: 'map',
            view: new ol.View({
                center: ol.proj.fromLonLat([-73.413148, 40.736301]),
                zoom: 3,
                minZoom: 1,
                maxZoom:19
            }),
        })
    </script>
</body>
</html>

Use ctrl + scroll to zoom the map
<!DOCTYPE html>
<html>
<head>
    <title>Vector Data in Openlayers</title>
    <link rel="stylesheet" href="https://cdn.thinkgeo.com/vectormap-js/2.0.0-beta012/vectormap.css" >
    <script src="https://cdn.thinkgeo.com/vectormap-js/1.0.0-beta015/mapsuite-vectormap.js"></script>
    <style type="text/css">
        #map{
            height: 100%;
            width: 100%;
            background-color: #aac6ee;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var view = new ol.View({
        center: ol.proj.fromLonLat([-89.8736, 25.78819]),
        zoom: 5,
        minZoom: 0,
        maxZoom: 15,
        });
    
        var source = new ol.source.VectorTile({
        format: new ol.format.MVT(),
        urls: ['https://cloud1.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey',
        'https://cloud2.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey',
        'https://cloud3.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey',
        'https://cloud4.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey',
        'https://cloud5.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey',
        'https://cloud6.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apikey=Your apiKey']
        });
    
        var layer = new ol.layer.VectorTile({
        source: source,
        style: createStyle(ol.style.Style, ol.style.Fill, ol.style.Stroke, ol.style.Text, ol.style.Circle),
        declutter: true
        });
    
        var map = new ol.Map({
        target: 'map',
        view: view,
        layers: [layer]
        });
    
        var zoom = view.getZoom();
        view.on("change:resolution", function (e) {
        zoom = view.getZoom();
        if ((zoom.toString()).indexOf(".") > 0) {
            zoom = zoom.toFixed(2);
        }
        });
    
        function createStyle(Style, Fill, Stroke, Text, Circle) {
        var fill = new Fill({
            color: '#000'
        });
        var stroke = new Stroke({
            color: '#0f0',
            width: 1
        });
    
        var polygon = new Style({
            fill: fill
        });
        var strokedPolygon = new Style({
            fill: fill,
            stroke: stroke
        });
        var line = new Style({
            stroke: stroke
        });
        var text = new Style({
            text: new Text({
            text: '#ccc',
            fill: fill,
            stroke: stroke
            })
        });
        var circle = new Style({
            image: new Circle({
            radius: 16,
            fill: fill,
            stroke: stroke
            })
        });
        var styles = [];
        return function (feature) {
            var length = 0;
            var layer = feature.get('layer');
            var cls = feature.get('class');
            var type = feature.get('type');
            var scalerank = feature.get('scalerank');
            var labelrank = feature.get('labelrank');
            var adminLevel = feature.get('admin_level');
            var disputed = feature.get('disputed');
            if (layer == 'country') {
            fill.setColor('#f0eee8');
            styles[length++] = polygon;
            } else if (layer == 'urban') {
            fill.setColor('#a59b7a');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'agriculture') {
            fill.setColor('#e3f2d2');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'ice') {
            fill.setColor('#fff');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'wood') {
            fill.setColor('#b7e7b0');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'grassland') {
            fill.setColor('#a3d393');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'scrub') {
            fill.setColor('#85cc6c');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'rock') {
            fill.setColor('#776d4c');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'wetland') {
            fill.setColor('#9cba5c');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'park') {
            fill.setColor('#cbe493');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'pitch') {
            fill.setColor('#01a263');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'park') {
            fill.setColor('#9cba5c');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'sand') {
            fill.setColor('#b2ad8e');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'cemetery') {
            fill.setColor('#c5b574');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'crops') {
            fill.setColor('#c4d270');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'grass') {
            fill.setColor('#dae9a2');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'swamps') {
            fill.setColor('#9cba5c');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'tundra') {
            fill.setColor('#adc875');
            styles[length++] = polygon;
            } else if (layer == 'landcover' && cls == 'trees') {
            fill.setColor('#7ca741');
            styles[length++] = polygon;
            } else if (layer == 'water') {
            fill.setColor('#4cbdac');
            styles[length++] = polygon;
            } else if (layer == 'waterway') {
            stroke.setColor('#4cbdac');
            stroke.setWidth(2);
            styles[length++] = line;
            } else if (layer == 'building') {
            fill.setColor('#e1dfd1');
            stroke.setColor('#383838');
            stroke.setWidth(1);
            styles[length++] = strokedPolygon;
            } else if (layer == 'admin_boundary' && adminLevel == 2) {
            stroke.setColor('#626354');
            stroke.setWidth(2);
            styles[length++] = line;
            } else if (layer == 'admin_boundary' && adminLevel == 4 && scalerank == 0 && zoom >= 3 && zoom <= 8) {
            stroke.setColor('#999999');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'admin_boundary' && adminLevel == 4 && scalerank == 1 && zoom >= 4 && zoom <= 8) {
            stroke.setColor('#999999');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'admin_boundary' && adminLevel == 4 && scalerank == 2 && zoom >= 5 && zoom <= 8) {
            stroke.setColor('#999999');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'admin_boundary' && adminLevel == 4 && zoom >= 9) {
            stroke.setColor('#999999');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'aeroway' && cls == 'runway') {
            stroke.setColor('#000');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'aeroway' && cls == 'taxiway') {
            stroke.setColor('#000');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'aeroway' && cls == 'aerodrome') {
            fill.setColor('#8e845f');
            styles[length++] = polygon;
            } else if (layer == 'aeroway' && cls == 'helipad') {
            fill.setColor('#8e845f');
            styles[length++] = polygon;
            } else if (layer == 'aeroway' && cls == 'apron') {
            fill.setColor('#8e845f');
            styles[length++] = polygon;
            } else if (layer == 'road' && cls == 'motorway') {
            stroke.setColor('#e2e566');
            stroke.setWidth(2);
            styles[length++] = line;
            } else if (layer == 'road' && cls == 'trunk') {
            stroke.setColor('#e2e566');
            stroke.setWidth(2);
            styles[length++] = line;
            } else if (layer == 'road' && cls == 'primary') {
            stroke.setColor('#e2e566');
            stroke.setWidth(2);
            styles[length++] = line;
            } else if (layer == 'road' && (cls == 'secondary' || cls == 'tertiary' || cls == 'road' || cls ==
                'residential' || cls == 'living_street' || cls == 'unclassified' || cls == 'service' || cls ==
                'pedestrian' || cls == 'track' || cls == 'construction') && zoom >= 12) {
            stroke.setColor('#e2e566');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == 'railway') {
            stroke.setColor('#ccc');
            stroke.setWidth(1);
            styles[length++] = line;
            } else if (layer == "place") {
            fill.setColor('#000');
            stroke.setColor('#fff');
            stroke.setWidth(2);
            circle.getImage().setRadius(3);
            styles[length++] = circle;
            } else if (layer == "poi" && zoom >= 13) {
            fill.setColor('#0f0');
            stroke.setColor('#fff');
            stroke.setWidth(2);
            circle.getImage().setRadius(3);
            styles[length++] = circle;
            } else if (layer == "admin_name" && cls == "country" && labelrank <= 1 && zoom >= 2 && zoom <= 5) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 15px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#334');
            stroke.setColor('#ccc');
            stroke.setWidth(2);
            styles[length++] = text;
            } else if (layer == "admin_name" && cls == "country" && labelrank <= 4 && zoom >= 4 && zoom <= 5) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 15px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#334');
            stroke.setColor('#ccc');
            stroke.setWidth(2);
            styles[length++] = text;
            } else if (layer == "admin_name" && cls == "country" && labelrank >= 5 && zoom >= 6 && zoom <= 7) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 15px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#334');
            stroke.setColor('#ccc');
            stroke.setWidth(2);
            styles[length++] = text;
            } else if (layer == "admin_name" && cls == "state" && labelrank == 0 && zoom >= 3 && zoom <= 7) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 12px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#444');
            stroke.setColor('#fff');
            stroke.setWidth(5);
            styles[length++] = text;
            } else if (layer == "admin_name" && cls == "state" && labelrank >= 1 && labelrank <= 3 && zoom >= 6 && zoom <=
            7) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 12px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#444');
            stroke.setColor('#fff');
            stroke.setWidth(2);
            styles[length++] = text;
            } else if (layer == "admin_name" && cls == "state" && labelrank >= 4 && zoom >= 6 && zoom <= 7) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('bold 11px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#444');
            stroke.setColor('#eee');
            stroke.setWidth(2);
            styles[length++] = text;
            } else if (layer == "marine_name" && zoom >= 2 && zoom <= 10 && cls == 0) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#44f');
            stroke.setColor('#fff');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "marine_name" && zoom >= 4 && zoom <= 10 && cls >= 1) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 12px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#44f');
            stroke.setColor('#fff');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 12 && zoom <= 15 && cls == 'motorway') {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            text.getText().setPlacement('Line');
            fill.setColor('#0ff');
            stroke.setColor('#4c4f4b');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 12 && zoom <= 15 && cls == 'trunk') {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#585654');
            stroke.setColor('#585654');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 13 && zoom <= 15 && cls == 'primary') {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#585654');
            stroke.setColor('#585654');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 13 && zoom <= 15 && cls == 'secondary') {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#585654');
            stroke.setColor('#585654');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 15 && zoom <= 15 && (cls == 'tertiary' || cls == 'residential')) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 10px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#585654');
            stroke.setColor('#585654');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "road_name" && zoom >= 15 && zoom <= 15 && (cls == 'pedestrian' || cls == 'road' || cls ==
                'raceway' || cls == 'unclassified' || cls == 'cycleway' || cls == 'bridleway' || cls == 'path' || cls ==
                'track')) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 8px "Open Sans", "Arial Unicode MS"');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#585654');
            stroke.setColor('#585654');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "water_name" && zoom >= 10 && zoom <= 15) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 500 16px Arial, Helvetica, sans-serif');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#44f');
            stroke.setColor('#fff');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "waterway_name" && zoom >= 13 && zoom <= 15 && cls == 0) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 500 16px Arial, Helvetica, sans-serif');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#44f');
            stroke.setColor('#fff');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "waterway_name" && zoom >= 18 && zoom <= 15) {
            text.getText().setText(feature.get('name'));
            text.getText().setFont('oblique 500 16px Arial, Helvetica, sans-serif');
            text.getText().setPadding([20, 20, 20, 20]);
            fill.setColor('#000');
            stroke.setColor('#ccc');
            stroke.setWidth(1);
            styles[length++] = text;
            } else if (layer == "building_name" && zoom >= 17 && zoom <= 15) {
            fill.setColor('#845f35');
            stroke.setColor('#ccc');
            stroke.setWidth(1);
            circle.getImage().setRadius(3);
            styles[length++] = circle;
            } else if (layer == "housenumber" && zoom >= 18 && zoom <= 15) {
            fill.setColor('#845f35');
            stroke.setColor('#ccc');
            stroke.setWidth(1);
            circle.getImage().setRadius(3);
            styles[length++] = circle;
            }
            styles.length = length;
            return styles;
        };
    }
    </script>
</body>
</html>

Use ctrl + scroll to zoom the map
<!DOCTYPE html>
<html >
<head>
    <title>Vector Data in Leaflet</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.3/leaflet.css" type="text/css" >
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        .label-icon-text{
            color: rgb(42, 151, 214);
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet-src.js"> </script>
    <script src="./Leaflet.MapboxVectorTile.js"> </script>
    <script>
    var zoom = 2;
    var map = L.map('map').setView([32, -92], 5); 
    map.on("zoomend", function (e) {
        zoom = e.target.getZoom();
    });
    var source = new L.TileLayer.MVTSource({
        url: "https://cloud.thinkgeo.com/api/v1/maps/vector/streets/3857/{z}/{x}/{y}.pbf?apiKey=Your apiKey",
        debug: false,
        clickableLayers: null,
        style: function (feature) {
            var style = {
                color: '#ccc'
            };

            function setLandcoverColor(feature, zoom) {
                if (zoom >= 2 && zoom <= 15) {
                    var color = '#e3f2d2';
                    var clsNum = feature.properties.class;
                    return color;
                }
            }

            function setAdminName(feature, zoom) {
                var result = {
                    color: '#33334444',
                    radius: 1
                };
                var clsNum = feature.properties.class;
                if (zoom >= 2 && zoom <= 5) {
                    switch (clsNum) {
                        case 'country':
                            result.color = '#333344cc',
                                result.radius = 3;
                            break;
                    }
                } else if (zoom === 6) {
                    switch (clsNum) {
                        case 'state':
                            result.color = '#33334488',
                                result.radius = 2;
                            break;
                    }
                }
                return result;
            }

            var layerName = feature.layer.name;
            switch (layerName) {
                case 'country':
                    style.color = '#f0eee8aa';
                    break;
                case 'landcover':
                    style.color = setLandcoverColor(feature, zoom);
                    break;
                case 'water':
                    style.color = '#4cbdac';
                    break;
                case 'waterway':
                    style.color = '#4cbdac';
                    style.weight = 5;
                    break;
                case 'building':
                    style.color = '#e1dfd1';
                    break;
                case 'aeroway':
                    style.color = '#8e845f';
                    break;
                case 'place':
                    style.color = '#000';
                    style.radius = 2;
                    break;
                case 'road':
                    style.color = '#d7db2c';
                    break;
                case 'urban':
                    style.color = '#cccccc11';
                    break;
                case 'railway':
                    style.color = '#ccc';
                    break;
                case 'poi':
                    style.color = '#00ff0044';
                    style.radius = 3;
                    break;
                case 'admin_name':
                    style.color = setAdminName(feature, zoom).color;
                    style.radius = setAdminName(feature, zoom).radius;
                    break;
                case 'marine_name':
                    style.staticLabel = function () {
                        var style = {
                            html: feature.properties.name,
                            cssClass: 'label-icon-text'
                        };
                        return style;
                    };
                    break;
                case 'road_number':
                    style.color = '#334';
                    break;
                case 'road_name':
                    style.color = '#0ff';
                    style.radius = 1;
                    break;
                case 'water_name':
                    style.color = '#44f';
                    style.radius = 3;
                    break;
                case 'waterway_name':
                    style.color = '#44f';
                    style.radius = 2;
                    break;
                case 'building_name':
                    style.color = '#845f3544';
                    style.radius = 2;
                    break;
                case 'housenumber':
                    style.color = '#845f3544';
                    style.radius = 2;
                    break;
            }
            return style;
        },
    });
    map.addLayer(source);
    </script>
</body>
</html>

Ready to Get Started?

Ready to add ThinkGeo Cloud services to your project? Sign up for a free ThinkGeo account and get full access to all of these services free for 60 days.

Start Your Evaluation