From cb03648704f1a8786218e409ee28ad3cd114c665 Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Wed, 16 Jul 2014 17:01:26 +0200 Subject: [PATCH 1/3] Limit map size --- examples/tile-vector.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/examples/tile-vector.html b/examples/tile-vector.html index 02784c351c..f3456c7676 100644 --- a/examples/tile-vector.html +++ b/examples/tile-vector.html @@ -9,6 +9,11 @@ Tile vector example + From 338f86f774504d08d66978f2e308a425d776261a Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Wed, 16 Jul 2014 17:01:40 +0200 Subject: [PATCH 2/3] More data in example --- examples/tile-vector.js | 80 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 78 insertions(+), 2 deletions(-) diff --git a/examples/tile-vector.js b/examples/tile-vector.js index eb73c81f75..d5aa3baf2a 100644 --- a/examples/tile-vector.js +++ b/examples/tile-vector.js @@ -73,13 +73,89 @@ var roadLayer = new ol.layer.Vector({ } }); +var buildingStyle = [ + new ol.style.Style({ + fill: new ol.style.Fill({ + color: '#666', + opacity: .4 + }), + stroke: new ol.style.Stroke({ + color: '#FFF', + width: 1 + }) + }) +]; +var buildingLayer = new ol.layer.Vector({ + source: new ol.source.TileVector({ + format: new ol.format.TopoJSON({ + defaultProjection: 'EPSG:4326' + }), + projection: 'EPSG:3857', + tileGrid: new ol.tilegrid.XYZ({ + maxZoom: 19 + }), + url: 'http://{a-c}.tile.openstreetmap.us/' + + 'vectiles-buildings/{z}/{x}/{y}.topojson' + }), + style: function(f, resolution) { + return (resolution < 5) ? buildingStyle : []; + } +}); + +var landuseStyleCache = {}; +var landuseLayer = new ol.layer.Vector({ + source: new ol.source.TileVector({ + format: new ol.format.TopoJSON({ + defaultProjection: 'EPSG:4326' + }), + projection: 'EPSG:3857', + tileGrid: new ol.tilegrid.XYZ({ + maxZoom: 19 + }), + url: 'http://{a-c}.tile.openstreetmap.us/' + + 'vectiles-land-usages/{z}/{x}/{y}.topojson' + }), + style: function(feature, resolution) { + var kind = feature.get('kind'); + var styleKey = kind; + var styleArray = landuseStyleCache[styleKey]; + if (!styleArray) { + var color, width; + color = { + 'parking': '#ddd', + 'industrial': '#aaa', + 'urban area': '#aaa', + 'park': '#76C759', + 'school': '#DA10E7', + 'garden': '#76C759', + 'pitch': '#D58F8D', + 'scrub': '#3E7D28', + 'residential': '#4C9ED9' + }[kind]; + width = kind == 'highway' ? 1.5 : 1; + styleArray = [new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: color, + width: width + }), + fill: new ol.style.Fill({ + color: color, + opacity: .5 + }) + })]; + landuseStyleCache[styleKey] = styleArray; + } + return styleArray; + } +}); + var map = new ol.Map({ - layers: [waterLayer, roadLayer], + layers: [landuseLayer, buildingLayer, waterLayer, roadLayer], renderer: 'canvas', target: document.getElementById('map'), view: new ol.View({ center: ol.proj.transform([-74.0064, 40.7142], 'EPSG:4326', 'EPSG:3857'), maxZoom: 19, - zoom: 14 + zoom: 15 }) }); From 49299dfe44841e3eacf4d83270acce1a0bcac83b Mon Sep 17 00:00:00 2001 From: Antoine Abt Date: Fri, 25 Jul 2014 17:04:00 +0200 Subject: [PATCH 3/3] Uncheck heavy layers by default --- examples/tile-vector.html | 11 +++++++++++ examples/tile-vector.js | 20 ++++++++++++++++---- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/examples/tile-vector.html b/examples/tile-vector.html index f3456c7676..5fb1416079 100644 --- a/examples/tile-vector.html +++ b/examples/tile-vector.html @@ -12,6 +12,7 @@ @@ -41,6 +42,16 @@

See the tile-vector.js source to see how this is done.

+
+ Warning Map is becoming unresponsive with too many layers. +
+
+ Layers + + + + +
tile-vector, openstreetmap
diff --git a/examples/tile-vector.js b/examples/tile-vector.js index d5aa3baf2a..48737131e2 100644 --- a/examples/tile-vector.js +++ b/examples/tile-vector.js @@ -77,10 +77,10 @@ var buildingStyle = [ new ol.style.Style({ fill: new ol.style.Fill({ color: '#666', - opacity: .4 + opacity: 0.4 }), stroke: new ol.style.Stroke({ - color: '#FFF', + color: '#444', width: 1 }) }) @@ -97,8 +97,9 @@ var buildingLayer = new ol.layer.Vector({ url: 'http://{a-c}.tile.openstreetmap.us/' + 'vectiles-buildings/{z}/{x}/{y}.topojson' }), + visible: false, style: function(f, resolution) { - return (resolution < 5) ? buildingStyle : []; + return (resolution < 10) ? buildingStyle : []; } }); @@ -115,6 +116,7 @@ var landuseLayer = new ol.layer.Vector({ url: 'http://{a-c}.tile.openstreetmap.us/' + 'vectiles-land-usages/{z}/{x}/{y}.topojson' }), + visible: false, style: function(feature, resolution) { var kind = feature.get('kind'); var styleKey = kind; @@ -140,7 +142,7 @@ var landuseLayer = new ol.layer.Vector({ }), fill: new ol.style.Fill({ color: color, - opacity: .5 + opacity: 0.5 }) })]; landuseStyleCache[styleKey] = styleArray; @@ -159,3 +161,13 @@ var map = new ol.Map({ zoom: 15 }) }); + +$('input[type=checkbox]').on('change', function() { + var layer = { + landuse: landuseLayer, + buildings: buildingLayer, + water: waterLayer, + roads: roadLayer + }[$(this).attr('id')]; + layer.setVisible(!layer.getVisible()); +});