How do I change the style of all markers in OpenLayers3?refresh the map Ol3 (Openlayers3)Loading GeoJSON via...
Sword in the Stone story where the sword was held in place by electromagnets
Does splitting a potentially monolithic application into several smaller ones help prevent bugs?
Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits?
If the Captain's screens are out, does he switch seats with the co-pilot?
How to discourage/prevent PCs from using door choke-points?
US to Europe trip with Canada layover- is 52 minutes enough?
Ban on all campaign finance?
Is it true that real estate prices mainly go up?
Deleting missing values from a dataset
"One can do his homework in the library"
Can "semicircle" be used to refer to a part-circle that is not a exact half-circle?
Heap & Stack Java
Prove that the total distance is minimised (when travelling across the longest path)
Running a subshell from the middle of the current command
Do I need to leave some extra space available on the disk which my database log files reside, for log backup operations to successfully occur?
Make a transparent 448*448 image
Can the druid cantrip Thorn Whip really defeat a water weird this easily?
Counter-example to the existence of left Bousfield localization of combinatorial model category
Time travel short story where dinosaur doesn't taste like chicken
Confusion with the nameplate of an induction motor
How to deal with a cynical class?
When is a batch class instantiated when you schedule it?
Format picture and text with TikZ and minipage
Gravity alteration as extermination tool viable?
How do I change the style of all markers in OpenLayers3?
refresh the map Ol3 (Openlayers3)Loading GeoJSON via AJAX after adding Layer to OpenLayers 3?OpenLayers3 with google map local tiles serverHow to change the style of Openlayers 3 zoom box?Get all Geometries Openlayers3OpenLayers3 how to limits the drag range of the mapopenlayers3 restore original style of specific featurechange the style of selected features in ol3Understanding OpenLayers?Bounding box coordinates and strange WMS behavior
This is probably a newbie question, but am at my wits end.
I have a map that has several markers (see attached code). What I am trying to do is alter ALL the markers depending on a map event (e.g., resizing marker for a zoom event). I am trying to do this without embedding the entire for loop creating markers within the event handler. Any idea how I can change all markers together?
JS Fiddle
<!DOCTYPE html>
<html>
<body>
<!-- OpenLayers CSS -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.css" type="text/css">
<!-- Map Modal starts -->
<div id="map" style="position:relative; max-width:100%; height:500px"></div>
<!-- OpenLayers JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.js" type="text/javascript"></script>
<!-- OpenLayers 3 Map Code -->
<script>
// Map center
var center_location = ol.proj.transform([-71,44], 'EPSG:4326', 'EPSG:3857');
var olview = new ol.View({
center: center_location,
zoom: 8,
})
// map tiles from OpenStreetMaps (OSM)
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var sourceFeatures = new ol.source.Vector();
var layerFeatures = new ol.layer.Vector({source: sourceFeatures});
var map = new ol.Map({
target: 'map',
view: olview,
layers: [layer, layerFeatures],
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
});
map.on("moveend", function(e) {
console.log(map.getView().getZoom());
});
var style1 = [
new ol.style.Style({
image: new ol.style.Icon({
scale: .05,
src: "https://upload.wikimedia.org/wikipedia/commons/e/e3/Green_Dot.svg",
}),
zIndex: 5,
}),
];
// Lat/lon data
var places = [
[-71,44],
[-71.25,44],
[-71.5,44],
[-71.75,44],
[-72,44]
];
// Iterate across lat/lon and create markers
for (var i = 0; i < places.length; i++) {
// markers
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0],places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
feature.setStyle(style1);
sourceFeatures.addFeature(feature);
} // end for loop
</script>
</body>
</html>
openlayers
asked Feb 11 at 22:51
racket99racket99
1
bumped to the homepage by Community♦ 6 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
This is probably a newbie question, but am at my wits end.
I have a map that has several markers (see attached code). What I am trying to do is alter ALL the markers depending on a map event (e.g., resizing marker for a zoom event). I am trying to do this without embedding the entire for loop creating markers within the event handler. Any idea how I can change all markers together?
JS Fiddle
<!DOCTYPE html>
<html>
<body>
<!-- OpenLayers CSS -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.css" type="text/css">
<!-- Map Modal starts -->
<div id="map" style="position:relative; max-width:100%; height:500px"></div>
<!-- OpenLayers JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.js" type="text/javascript"></script>
<!-- OpenLayers 3 Map Code -->
<script>
// Map center
var center_location = ol.proj.transform([-71,44], 'EPSG:4326', 'EPSG:3857');
var olview = new ol.View({
center: center_location,
zoom: 8,
})
// map tiles from OpenStreetMaps (OSM)
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var sourceFeatures = new ol.source.Vector();
var layerFeatures = new ol.layer.Vector({source: sourceFeatures});
var map = new ol.Map({
target: 'map',
view: olview,
layers: [layer, layerFeatures],
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
});
map.on("moveend", function(e) {
console.log(map.getView().getZoom());
});
var style1 = [
new ol.style.Style({
image: new ol.style.Icon({
scale: .05,
src: "https://upload.wikimedia.org/wikipedia/commons/e/e3/Green_Dot.svg",
}),
zIndex: 5,
}),
];
// Lat/lon data
var places = [
[-71,44],
[-71.25,44],
[-71.5,44],
[-71.75,44],
[-72,44]
];
// Iterate across lat/lon and create markers
for (var i = 0; i < places.length; i++) {
// markers
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0],places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
feature.setStyle(style1);
sourceFeatures.addFeature(feature);
} // end for loop
</script>
</body>
</html>
openlayers
asked Feb 11 at 22:51
racket99racket99
1
bumped to the homepage by Community♦ 6 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
This is probably a newbie question, but am at my wits end.
I have a map that has several markers (see attached code). What I am trying to do is alter ALL the markers depending on a map event (e.g., resizing marker for a zoom event). I am trying to do this without embedding the entire for loop creating markers within the event handler. Any idea how I can change all markers together?
JS Fiddle
<!DOCTYPE html>
<html>
<body>
<!-- OpenLayers CSS -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.css" type="text/css">
<!-- Map Modal starts -->
<div id="map" style="position:relative; max-width:100%; height:500px"></div>
<!-- OpenLayers JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.js" type="text/javascript"></script>
<!-- OpenLayers 3 Map Code -->
<script>
// Map center
var center_location = ol.proj.transform([-71,44], 'EPSG:4326', 'EPSG:3857');
var olview = new ol.View({
center: center_location,
zoom: 8,
})
// map tiles from OpenStreetMaps (OSM)
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var sourceFeatures = new ol.source.Vector();
var layerFeatures = new ol.layer.Vector({source: sourceFeatures});
var map = new ol.Map({
target: 'map',
view: olview,
layers: [layer, layerFeatures],
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
});
map.on("moveend", function(e) {
console.log(map.getView().getZoom());
});
var style1 = [
new ol.style.Style({
image: new ol.style.Icon({
scale: .05,
src: "https://upload.wikimedia.org/wikipedia/commons/e/e3/Green_Dot.svg",
}),
zIndex: 5,
}),
];
// Lat/lon data
var places = [
[-71,44],
[-71.25,44],
[-71.5,44],
[-71.75,44],
[-72,44]
];
// Iterate across lat/lon and create markers
for (var i = 0; i < places.length; i++) {
// markers
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0],places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
feature.setStyle(style1);
sourceFeatures.addFeature(feature);
} // end for loop
</script>
</body>
</html>
openlayers
asked Feb 11 at 22:51
racket99racket99
1
This is probably a newbie question, but am at my wits end.
I have a map that has several markers (see attached code). What I am trying to do is alter ALL the markers depending on a map event (e.g., resizing marker for a zoom event). I am trying to do this without embedding the entire for loop creating markers within the event handler. Any idea how I can change all markers together?
JS Fiddle
<!DOCTYPE html>
<html>
<body>
<!-- OpenLayers CSS -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.css" type="text/css">
<!-- Map Modal starts -->
<div id="map" style="position:relative; max-width:100%; height:500px"></div>
<!-- OpenLayers JS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.min.js" type="text/javascript"></script>
<!-- OpenLayers 3 Map Code -->
<script>
// Map center
var center_location = ol.proj.transform([-71,44], 'EPSG:4326', 'EPSG:3857');
var olview = new ol.View({
center: center_location,
zoom: 8,
})
// map tiles from OpenStreetMaps (OSM)
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var sourceFeatures = new ol.source.Vector();
var layerFeatures = new ol.layer.Vector({source: sourceFeatures});
var map = new ol.Map({
target: 'map',
view: olview,
layers: [layer, layerFeatures],
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
});
map.on("moveend", function(e) {
console.log(map.getView().getZoom());
});
var style1 = [
new ol.style.Style({
image: new ol.style.Icon({
scale: .05,
src: "https://upload.wikimedia.org/wikipedia/commons/e/e3/Green_Dot.svg",
}),
zIndex: 5,
}),
];
// Lat/lon data
var places = [
[-71,44],
[-71.25,44],
[-71.5,44],
[-71.75,44],
[-72,44]
];
// Iterate across lat/lon and create markers
for (var i = 0; i < places.length; i++) {
// markers
var feature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0],places[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
feature.setStyle(style1);
sourceFeatures.addFeature(feature);
} // end for loop
</script>
</body>
</html>
openlayers
openlayers
asked Feb 11 at 22:51
racket99racket99
1
asked Feb 11 at 22:51
racket99racket99
1
asked Feb 11 at 22:51
racket99racket99
1
asked Feb 11 at 22:51
racket99racket99
1
asked Feb 11 at 22:51
racket99racket99
1
1
bumped to the homepage by Community♦ 6 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 6 mins ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Set the style via a style function on the layer. You can add additional code to the function to test conditions and return different styles as necessary
var layerFeatures = new ol.layer.Vector({
source: sourceFeatures,
style: function(feature, resolution) {
return style1;
}
});
Move the definition of style1 above that code and remove this line
feature.setStyle(style1);
answered Feb 11 at 23:47
MikeMike
2,230139
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f311815%2fhow-do-i-change-the-style-of-all-markers-in-openlayers3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Set the style via a style function on the layer. You can add additional code to the function to test conditions and return different styles as necessary
var layerFeatures = new ol.layer.Vector({
source: sourceFeatures,
style: function(feature, resolution) {
return style1;
}
});
Move the definition of style1 above that code and remove this line
feature.setStyle(style1);
answered Feb 11 at 23:47
MikeMike
2,230139
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
add a comment |
Set the style via a style function on the layer. You can add additional code to the function to test conditions and return different styles as necessary
var layerFeatures = new ol.layer.Vector({
source: sourceFeatures,
style: function(feature, resolution) {
return style1;
}
});
Move the definition of style1 above that code and remove this line
feature.setStyle(style1);
answered Feb 11 at 23:47
MikeMike
2,230139
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
add a comment |
Set the style via a style function on the layer. You can add additional code to the function to test conditions and return different styles as necessary
var layerFeatures = new ol.layer.Vector({
source: sourceFeatures,
style: function(feature, resolution) {
return style1;
}
});
Move the definition of style1 above that code and remove this line
feature.setStyle(style1);
answered Feb 11 at 23:47
MikeMike
2,230139
Set the style via a style function on the layer. You can add additional code to the function to test conditions and return different styles as necessary
var layerFeatures = new ol.layer.Vector({
source: sourceFeatures,
style: function(feature, resolution) {
return style1;
}
});
Move the definition of style1 above that code and remove this line
feature.setStyle(style1);
answered Feb 11 at 23:47
MikeMike
2,230139
answered Feb 11 at 23:47
MikeMike
2,230139
answered Feb 11 at 23:47
MikeMike
2,230139
answered Feb 11 at 23:47
MikeMike
2,230139
2,230139
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
add a comment |
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Will this automatically trigger when an event happens (eg, 'change-resolution')?
– racket99
Feb 13 at 3:25
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
Resolution is one of the arguments of the style function. For a complex style definition see the mapbox-streets-v6-style.js of the Mapbox Vector Tiles Example
– bennos
Feb 13 at 8:39
add a comment |
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f311815%2fhow-do-i-change-the-style-of-all-markers-in-openlayers3%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
