Add Layer to OpenLayers with Stamen "Burning Map" - javascript

as my title assert
I would like to add a new "Burning" level of type stamen to my OpenLayers map. With others layer i.e watercolor/toner atc, it work, but not with Burning.
My code for doing this is:
var stamenLayers = new ol.layer.Group({
title: 'Stamen',
layers: [
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'burning' // toner terrain toner-lite watercolor <-- this work
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]
});

Related

I can't show a multipolygon on a map in OpenLayers

I cannot assign polygon property to the area I want on the map in my project that I have created with open layers and angular
My method that I have created my map and then call in ngOnit()
IntilazeMapParsel() {
this.view = new View({
center: [3876682.9740679907, 4746346.604388495],
zoom: 6.5,
// minZoom:5.8
});
console.log("mao")
this.mapParsel = new Map({
view:this.view,
layers: [
new Tile({
source: new XYZ({
url: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
}),
zIndex: -5444
}),
],
target: 'ol-map-parsel'
});
}
Here is the code I wrote because I want to show the multypolygon value on my map.
I don't understand why it doesn't appear on the map, I would appreciate it if you could help.

How to add the KML layer for Openlayers switcher?

how can i add a KML layer to the switcher by ol-ext Viglino?
When I add:
var vectorSource = new ol.layer.Vector({
source: new ol.source.Vector({
url: "IG1.kml",
format: new ol.format.KML()
})
The layer does not appear on the map.
To appear in the layer switcher the layer must have a title property
var vectorSource = new ol.layer.Vector({
title: "KML Layer",
source: new ol.source.Vector({
url: "IG1.kml",
format: new ol.format.KML()
})
})
If the layer is not appearing on the map check that .kml extension is enabled in your server MIME types.
Try :
import KML from 'ol/format/KML';
import VectorSource from 'ol/source/Vector';
import {Vector as VectorLayer} from 'ol/layer';
const vector = new VectorLayer({
source: new VectorSource({
url: 'IG1.kml',
format: new KML(),
}),
});

Changing Source url of a XYZ layer and redrawing the layer/map?

I wanna change the url of my ol3 map source. I've tryed using things such as map.set or map.getlayers().set or whatever but I can't seem to find a way to access my source object. Here's the code:
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
console.log(map.get("layergroup").get("layers").get("url"));
map.get("layergroup").get("layers").set("url",loc);
}
What's a way to change the url property and reload the layer ?
I also tried using the setSource function as in the following answer : here
but it seems to not work (can't setSource of undefined).
try the following
function init() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'PIXELS',
tileGrid: mapTileGrid,
url: loc
})
})
],
view: new ol.View({
projection: ol.proj.get('PIXELS'),
extent: mapExtent,
maxResolution: mapTileGrid.getResolution(0)
})
});
map.getView().fit(mapExtent, map.getSize());
//get alll the layers exist on your map
var layers = map.getLayers();
//lets assume you want to set the url for the first layer found
layers[0].getSource().setUrl(loc);
}

How can i assign a logo to the vector source (GPX) in OpenLayers 3?

im learing OpenLayers 3 and i am trying to assign an png image to the logo attribute of the layer.Vector.source like this:
var vectorSpeedLimit40 = new ol.layer.Vector({
title: 'speedlimit40',
source: new ol.source.Vector({
url: 'gpx/Fotoboks_40.gpx',
format: new ol.format.GPX({
extraStyles: false
}),
logo: '/imgs/lc.png'
})
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorSpeedLimit40],
target: document.getElementById('map-canvas'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
Where i thought this would show instances of the png, it shows small blue circles instead like this:
I have checked, double checked, triple checked and the path is correct relative to the client.
What am i doing wrong? Thanks!
To assign a specific image to a vectorLayer with a GPX source you have to assign the image property a new ol.style.Icon with the src attribute to the image like this:
var vectorSource = new ol.source.Vector({
// Specify that the source is of type GPX
format: new ol.format.GPX(),
// Here you specify the path to the image file
url: 'gpx/source.gpx'
})
var vectorStyle = new ol.style.Style({
// Set the image attribute to a new ol.style.Icon
image: new ol.style.Icon(/** #type {olx.style.IconOptions} */ ({
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
opacity: 0.75,
scale: 0.2,
// Here you specify the path to the image file
src: 'imgs/image.png'
}))
})
var vectorLayer = new ol.layer.Vector({
// Here you specify the source and style attributes of the ol.layer.Vector to the ones that are made above
source: vectorSource,
style: vectorStyle
});
// Then add it to the map
map.addLayer(vectorLayer);

Drag rotate interaction in OpenLayers 3 on Linux

I'd like to use the OpenLayers 3 rotation interaction on a browser running under Linux. This allows the map to be rotate by dragging whilst pressing Alt and Ctrl. This works fine on Windows, however not in Redhat 6u2 and likely other distributions as the Alt key is reserved for X-Windows drag Window behaviour.
Firstly I customized the DragRotate with ol.events.condition.shiftKeyOnly, which worked, but conflicted with the zoom-box functionality, i.e. draws a blue zoom box whilst rotating.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: ol.events.condition.shiftKeyOnly
})])
});
I'd like to retain the shift-drag for the zoom box and use some other key/combination, maybe 'R+Shift'? I've tried to customize the condition. See my JSFiddle
var customCondition = function(mapBrowserEvent) {
return false; // TODO
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: customCondition
})])
});
I can't find anything in the API about implementing custom conditions other than ol.events and MapBrowserEvent documentation. Using a debugger I can't find any attributes in the structure or nested originalEvent that contains a keycode etc.
How can I implement the customCondition function to detect when a given key is pressed during the drag?
Is there any other way of implementing a drag rotate that works in Linux
Here is a custom condition - Ctrl + Shift:
ol.events.condition.custom = function(mapBrowserEvent) {
var browserEvent = mapBrowserEvent.originalEvent;
return (browserEvent.ctrlKey && browserEvent.shiftKey);
};
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})],
target: 'map',
view: new ol.View({
center: [-25860000, 4130000],
zoom: 10
}),
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotate({
condition: ol.events.condition.custom
})])
});

Categories