From 341ba5b859b04050f6a503f72a15b0670a6160f1 Mon Sep 17 00:00:00 2001 From: Alexandre Brault Date: Sun, 10 Jan 2016 20:03:33 -0500 Subject: [PATCH 1/2] Move the icon style color to its own example --- examples/data/dot.png | Bin 0 -> 478 bytes examples/icon-color.css | 3 ++ examples/icon-color.html | 13 +++++ examples/icon-color.js | 111 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 127 insertions(+) create mode 100644 examples/data/dot.png create mode 100644 examples/icon-color.css create mode 100644 examples/icon-color.html create mode 100644 examples/icon-color.js diff --git a/examples/data/dot.png b/examples/data/dot.png new file mode 100644 index 0000000000000000000000000000000000000000..d5337830174e23fbc5bf61084fb75aebff7a7caa GIT binary patch literal 478 zcmV<40U`d0P)ZB7*1QC%0 z8-QQwdl9$>9)OK8MpyH;}|bBj$>?^ zCR%G_S(XAkrPx)})iRefj$^FrI%oL+aGO#!N-0%U6~-7oDq~C@ zn#%UdK&6y=v&==;|BX`__^Gy%9U&w#Ty0VD&xh=_9z@BN2i-g}&Ld3!t{**4#R zm53On6sy&WqA1?Ytm`^hLznZ-Fp04X?+ZN~C971>o+HC4iKMr4hzP{wZ{?{+yHxTAM U=CW(blmGw#07*qoM6N<$f=cV!Qvd(} literal 0 HcmV?d00001 diff --git a/examples/icon-color.css b/examples/icon-color.css new file mode 100644 index 0000000000..f25b6b7d33 --- /dev/null +++ b/examples/icon-color.css @@ -0,0 +1,3 @@ +#map { + position: relative; +} diff --git a/examples/icon-color.html b/examples/icon-color.html new file mode 100644 index 0000000000..77619505a3 --- /dev/null +++ b/examples/icon-color.html @@ -0,0 +1,13 @@ +--- +layout: example.html +title: Icon Colors +shortdesc: Example assigning a custom color to an icon +docs: > + Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file +tags: "vector, style, icon, marker" +resources: + - https://code.jquery.com/jquery-1.11.2.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js +--- +
diff --git a/examples/icon-color.js b/examples/icon-color.js new file mode 100644 index 0000000000..3efe1fa3b3 --- /dev/null +++ b/examples/icon-color.js @@ -0,0 +1,111 @@ +goog.require('ol.Feature'); +goog.require('ol.Map'); +goog.require('ol.Overlay'); +goog.require('ol.View'); +goog.require('ol.geom.Point'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.proj'); +goog.require('ol.source.TileJSON'); +goog.require('ol.source.Vector'); +goog.require('ol.style.Icon'); +goog.require('ol.style.Style'); + + +var rome = new ol.Feature({ + geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9])) +}); + +var london = new ol.Feature({ + geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222])) +}); + +var madrid = new ol.Feature({ + geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4])) +}); + +rome.setStyle(new ol.style.Style({ + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ + color: '#8959A8', + src: 'data/dot.png' + })) +})); + +london.setStyle(new ol.style.Style({ + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ + color: '#4271AE', + src: 'data/dot.png' + })) +})); + +madrid.setStyle(new ol.style.Style({ + image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ + color: [113, 140, 0], + src: 'data/dot.png' + })) +})); + + +var vectorSource = new ol.source.Vector({ + features: [rome, london, madrid] +}); + +var vectorLayer = new ol.layer.Vector({ + source: vectorSource +}); + +var rasterLayer = new ol.layer.Tile({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json', + crossOrigin: '' + }) +}); + +var map = new ol.Map({ + renderer: common.getRendererFromQueryString(), + layers: [rasterLayer, vectorLayer], + target: document.getElementById('map'), + view: new ol.View({ + center: ol.proj.fromLonLat([2.896372, 44.60240]), + zoom: 3 + }) +}); + +var element = document.getElementById('popup'); + +var popup = new ol.Overlay({ + element: element, + positioning: 'bottom-center', + stopEvent: false +}); +map.addOverlay(popup); + +// display popup on click +map.on('click', function(evt) { + var feature = map.forEachFeatureAtPixel(evt.pixel, + function(feature, layer) { + return feature; + }); + if (feature) { + popup.setPosition(evt.coordinate); + $(element).popover({ + 'placement': 'top', + 'html': true, + 'content': feature.get('name') + }); + $(element).popover('show'); + } else { + $(element).popover('destroy'); + } +}); + +// change mouse cursor when over marker +map.on('pointermove', function(e) { + if (e.dragging) { + $(element).popover('destroy'); + return; + } + var pixel = map.getEventPixel(e.originalEvent); + var hit = map.hasFeatureAtPixel(pixel); + map.getTarget().style.cursor = hit ? 'pointer' : ''; +}); From 2d151fb353d7b601fd893bf9f2ba4d7482617ef9 Mon Sep 17 00:00:00 2001 From: Alexandre Brault Date: Wed, 13 Jan 2016 08:31:57 -0500 Subject: [PATCH 2/2] Remove popup code from color example --- examples/icon-color.html | 5 +---- examples/icon-color.js | 40 ---------------------------------------- 2 files changed, 1 insertion(+), 44 deletions(-) diff --git a/examples/icon-color.html b/examples/icon-color.html index 77619505a3..cfa6e4e213 100644 --- a/examples/icon-color.html +++ b/examples/icon-color.html @@ -6,8 +6,5 @@ docs: > Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file tags: "vector, style, icon, marker" resources: - - https://code.jquery.com/jquery-1.11.2.min.js - - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js --- -
+
diff --git a/examples/icon-color.js b/examples/icon-color.js index 3efe1fa3b3..f8b4f88fa1 100644 --- a/examples/icon-color.js +++ b/examples/icon-color.js @@ -1,6 +1,5 @@ goog.require('ol.Feature'); goog.require('ol.Map'); -goog.require('ol.Overlay'); goog.require('ol.View'); goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); @@ -70,42 +69,3 @@ var map = new ol.Map({ zoom: 3 }) }); - -var element = document.getElementById('popup'); - -var popup = new ol.Overlay({ - element: element, - positioning: 'bottom-center', - stopEvent: false -}); -map.addOverlay(popup); - -// display popup on click -map.on('click', function(evt) { - var feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature, layer) { - return feature; - }); - if (feature) { - popup.setPosition(evt.coordinate); - $(element).popover({ - 'placement': 'top', - 'html': true, - 'content': feature.get('name') - }); - $(element).popover('show'); - } else { - $(element).popover('destroy'); - } -}); - -// change mouse cursor when over marker -map.on('pointermove', function(e) { - if (e.dragging) { - $(element).popover('destroy'); - return; - } - var pixel = map.getEventPixel(e.originalEvent); - var hit = map.hasFeatureAtPixel(pixel); - map.getTarget().style.cursor = hit ? 'pointer' : ''; -});