diff --git a/examples/data/geojson/line-samples.geojson b/examples/data/geojson/line-samples.geojson new file mode 100644 index 0000000000..21ebbe2bf8 --- /dev/null +++ b/examples/data/geojson/line-samples.geojson @@ -0,0 +1,16 @@ +{ +"type": "FeatureCollection", +"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + +"features": [ +{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } }, +{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } }, +{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } }, +{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } }, +{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } }, +{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } }, +{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } }, +{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } }, +{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } } +] +} diff --git a/examples/data/geojson/point-samples.geojson b/examples/data/geojson/point-samples.geojson new file mode 100644 index 0000000000..cdc8d4e071 --- /dev/null +++ b/examples/data/geojson/point-samples.geojson @@ -0,0 +1,16 @@ +{ +"type": "FeatureCollection", +"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + +"features": [ +{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } }, +{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } }, +{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } }, +{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } }, +{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } }, +{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } }, +{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } }, +{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } }, +{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } } +] +} diff --git a/examples/data/geojson/polygon-samples.geojson b/examples/data/geojson/polygon-samples.geojson new file mode 100644 index 0000000000..eef9eee79b --- /dev/null +++ b/examples/data/geojson/polygon-samples.geojson @@ -0,0 +1,16 @@ +{ +"type": "FeatureCollection", +"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } }, + +"features": [ +{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } }, +{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } } +] +} diff --git a/examples/vector-labels.html b/examples/vector-labels.html new file mode 100644 index 0000000000..61adea5d94 --- /dev/null +++ b/examples/vector-labels.html @@ -0,0 +1,322 @@ + + + + + + + + + + + + Vector labels example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +

Points

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +

Lines

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +

Polygons

+
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +
+ +
+ +
+

Vector labels example

+

Example of GeoJSON features with labels.

+
+

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

+

Note: The 'Text/Wrap' option is currently not working properly. It's supposed to add '\n' to allow multiline labels, but spaces are currently shown instead.

+
+
geojson, vector, openstreetmap, label
+
+ +
+ + +
+ + + + + + + diff --git a/examples/vector-labels.js b/examples/vector-labels.js new file mode 100644 index 0000000000..fb3fcb51f0 --- /dev/null +++ b/examples/vector-labels.js @@ -0,0 +1,224 @@ +goog.require('ol.Feature'); +goog.require('ol.Map'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.source.MapQuest'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); +goog.require('ol.style.Text'); + + +var myDom = { + 'points': { + 'text': document.getElementById('points-text'), + 'align': document.getElementById('points-align'), + 'baseline': document.getElementById('points-baseline'), + 'font': document.getElementById('points-font'), + 'weight': document.getElementById('points-weight'), + 'size': document.getElementById('points-size'), + 'color': document.getElementById('points-color'), + 'outline': document.getElementById('points-outline'), + 'outline-width': document.getElementById('points-outline-width'), + 'maxreso': document.getElementById('points-maxreso') + }, + 'lines': { + 'text': document.getElementById('lines-text'), + 'align': document.getElementById('lines-align'), + 'baseline': document.getElementById('lines-baseline'), + 'font': document.getElementById('lines-font'), + 'weight': document.getElementById('lines-weight'), + 'size': document.getElementById('lines-size'), + 'color': document.getElementById('lines-color'), + 'outline': document.getElementById('lines-outline'), + 'outline-width': document.getElementById('lines-outline-width'), + 'maxreso': document.getElementById('lines-maxreso') + }, + 'polygons': { + 'text': document.getElementById('polygons-text'), + 'align': document.getElementById('polygons-align'), + 'baseline': document.getElementById('polygons-baseline'), + 'font': document.getElementById('polygons-font'), + 'weight': document.getElementById('polygons-weight'), + 'size': document.getElementById('polygons-size'), + 'color': document.getElementById('polygons-color'), + 'outline': document.getElementById('polygons-outline'), + 'outline-width': document.getElementById('polygons-outline-width'), + 'maxreso': document.getElementById('polygons-maxreso') + } +}; + +var getText = function(feature, resolution, dom) { + var type = dom['text'].value; + var maxResolution = dom['maxreso'].value; + var text = feature.getProperties().name; + + if (resolution > maxResolution) { + text = ''; + } else if (type == 'hide') { + text = ''; + } else if (type == 'shorten') { + text = text.trunc(12); + } else if (type == 'wrap') { + text = stringDivider(text, 16, '\n'); + } + + return text; +}; + + +var createTextStyle = function(feature, resolution, dom) { + var align = dom['align'].value; + var baseline = dom['baseline'].value; + var size = dom['size'].value; + var weight = dom['weight'].value; + var font = weight + ' ' + size + ' ' + dom['font'].value; + var fillColor = dom['color'].value; + var outlineColor = dom['outline'].value; + var outlineWidth = parseInt(dom['outline-width'].value, 10); + + return new ol.style.Text({ + textAlign: align, + textBaseline: baseline, + font: font, + text: getText(feature, resolution, dom), + fill: new ol.style.Fill({color: fillColor}), + stroke: new ol.style.Stroke({color: outlineColor, width: outlineWidth}) + }); +}; + + +// Polygons +var createPolygonStyleFunction = function() { + return function(feature, resolution) { + var style = new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: 'blue', + width: 1 + }), + fill: new ol.style.Fill({ + color: 'rgba(0, 0, 255, 0.1)' + }), + text: createTextStyle(feature, resolution, myDom.polygons) + }); + return [style]; + }; +}; + +var vectorPolygons = new ol.layer.Vector({ + source: new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/polygon-samples.geojson' + }), + style: createPolygonStyleFunction() +}); + + +// Lines +var createLineStyleFunction = function() { + return function(feature, resolution) { + var style = new ol.style.Style({ + stroke: new ol.style.Stroke({ + color: 'green', + width: 2 + }), + text: createTextStyle(feature, resolution, myDom.lines) + }); + return [style]; + }; +}; + +var vectorLines = new ol.layer.Vector({ + source: new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/line-samples.geojson' + }), + style: createLineStyleFunction() +}); + + +// Points +var createPointStyleFunction = function() { + return function(feature, resolution) { + var style = new ol.style.Style({ + image: new ol.style.Circle({ + radius: 10, + fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.1)'}), + stroke: new ol.style.Stroke({color: 'red', width: 1}) + }), + text: createTextStyle(feature, resolution, myDom.points) + }); + return [style]; + }; +}; + +var vectorPoints = new ol.layer.Vector({ + source: new ol.source.GeoJSON({ + projection: 'EPSG:3857', + url: 'data/geojson/point-samples.geojson' + }), + style: createPointStyleFunction() +}); + +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.MapQuest({layer: 'osm'}) + }), + vectorPolygons, + vectorLines, + vectorPoints + ], + renderer: 'canvas', + target: 'map', + view: new ol.View2D({ + center: [-8161939, 6095025], + zoom: 8 + }) +}); + +var refreshPoints = function() { + vectorPoints.setStyle(createPointStyleFunction()); +}; + +var refreshLines = function() { + vectorLines.setStyle(createLineStyleFunction()); +}; + +var refreshPolygons = function() { + vectorPolygons.setStyle(createPolygonStyleFunction()); +}; + + +/** + * @param {number} n The max number of characters to keep. + * @return {string} Truncated string. + */ +String.prototype.trunc = String.prototype.trunc || + function(n) { + return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0); + }; + + +// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript +function stringDivider(str, width, spaceReplacer) { + if (str.length > width) { + var p = width; + for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) { + } + if (p > 0) { + var left; + if (str.substring(p, p + 1) == '-') { + left = str.substring(0, p + 1); + } else { + left = str.substring(0, p); + } + var right = str.substring(p + 1); + return left + spaceReplacer + stringDivider(right, width, spaceReplacer); + } + } + return str; +}