1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.TopoJSON');
|
4 | goog.require('ol.layer.VectorTile');
|
5 | goog.require('ol.proj');
|
6 | goog.require('ol.source.VectorTile');
|
7 | goog.require('ol.style.Fill');
|
8 | goog.require('ol.style.Stroke');
|
9 | goog.require('ol.style.Style');
|
10 |
|
11 | var key = 'vector-tiles-5eJz6JX';
|
12 |
|
13 | var roadStyleCache = {};
|
14 | var roadColor = {
|
15 | 'major_road': '#776',
|
16 | 'minor_road': '#ccb',
|
17 | 'highway': '#f39'
|
18 | };
|
19 | var buildingStyle = new ol.style.Style({
|
20 | fill: new ol.style.Fill({
|
21 | color: '#666',
|
22 | opacity: 0.4
|
23 | }),
|
24 | stroke: new ol.style.Stroke({
|
25 | color: '#444',
|
26 | width: 1
|
27 | })
|
28 | });
|
29 | var waterStyle = new ol.style.Style({
|
30 | fill: new ol.style.Fill({
|
31 | color: '#9db9e8'
|
32 | })
|
33 | });
|
34 | var roadStyle = function(feature) {
|
35 | var kind = feature.get('kind');
|
36 | var railway = feature.get('railway');
|
37 | var sort_key = feature.get('sort_key');
|
38 | var styleKey = kind + '/' + railway + '/' + sort_key;
|
39 | var style = roadStyleCache[styleKey];
|
40 | if (!style) {
|
41 | var color, width;
|
42 | if (railway) {
|
43 | color = '#7de';
|
44 | width = 1;
|
45 | } else {
|
46 | color = roadColor[kind];
|
47 | width = kind == 'highway' ? 1.5 : 1;
|
48 | }
|
49 | style = new ol.style.Style({
|
50 | stroke: new ol.style.Stroke({
|
51 | color: color,
|
52 | width: width
|
53 | }),
|
54 | zIndex: sort_key
|
55 | });
|
56 | roadStyleCache[styleKey] = style;
|
57 | }
|
58 | return style;
|
59 | };
|
60 |
|
61 | var map = new ol.Map({
|
62 | layers: [
|
63 | new ol.layer.VectorTile({
|
64 | source: new ol.source.VectorTile({
|
65 | attributions: '© OpenStreetMap contributors, Who’s On First, ' +
|
66 | 'Natural Earth, and openstreetmapdata.com',
|
67 | format: new ol.format.TopoJSON({
|
68 | layerName: 'layer',
|
69 | layers: ['water', 'roads', 'buildings']
|
70 | }),
|
71 | maxZoom: 19,
|
72 | url: 'https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.topojson?api_key=' + key
|
73 | }),
|
74 | style: function(feature, resolution) {
|
75 | switch (feature.get('layer')) {
|
76 | case 'water': return waterStyle;
|
77 | case 'roads': return roadStyle(feature);
|
78 | case 'buildings': return (resolution < 10) ? buildingStyle : null;
|
79 | default: return null;
|
80 | }
|
81 | }
|
82 | })
|
83 | ],
|
84 | target: 'map',
|
85 | view: new ol.View({
|
86 | center: ol.proj.fromLonLat([-74.0064, 40.7142]),
|
87 | maxZoom: 19,
|
88 | zoom: 15
|
89 | })
|
90 | });
|