It's a react.js project with OpenLayers 5.3.0
The map is defined in
componentDidUpdate() {
this.map = new Map({
target: this.container,
view: new View({
center: [2.5, 2.5],
projection: projection,
zoom: 2,
minZoom: 0.1,
maxZoom: 7
}),
interactions: defaultInteractions({
// dragPan: false,
keyboard: false,
// mouseWheelZoom: false,
doubleClickZoom :false
}),
layers: [graphic, this.roadLayer, this.robotLayer, this.laserLayer, this.targetLayer, this.restrictLayer, this.specialLayer]
});
view=this.map.getView();
zoom=view.getZoom();
view.on('change:resolution',function(e){
console.log('change:resolution');// dosen't work
});
view.on('change:center',function(e){
console.log('moveing');
});
this.map.on('moveend',function(e){
console.log(view);
zoom = view.getZoom();
// console.log("resolution", view.getResolution()); // Always the same
// console.log('moveend');
console.log("zoom"+zoom); // Always 2
if(view.getZoom()!==zoom)
console.log('zomeend了,change:zoom了');
});
};
The problem is when I zoomin the map, change:resolution won't be triggered and zoom would always be 2 as init value. I also tried put map.on('moveend') at like componentDidMount(), same result.
Why can't I get the current Zoom?
Is it the problem of life circle of React? Any hint would be a huge help.
Related
I have added MapboxDirections control to by map using the normal method, which is working.
map.current = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/outdoors-v11',
center: [lng, lat],
zoom: zoom
});
directions.current = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'mapbox/cycling'
});
map.current.addControl(directions.current, 'top-left');
I want to add a SAVE button allowing me to get all the waypoints/coordinates of the route (that I can see on the map) but I cannot find a way to extract the coordinates out of the mapboxgl.Map or MapboxDirections object. I want to be able to save/download the results to a file.
Any ideas?
I am trying to get top left and right bottom of the Map which i am displaying. And i am trying to get this particular data in zoom event, but somehow this.map is becoming undefined and breaking the application
this.map.on('zoomend', function (layer) {
console.log("zoom",layer.target._zoom)
console.log("getbounds", this.map.getBounds());
});
Below i am providing the componentDidMount, here only i am defining zoom event, which working fine if i simply console.
componentDidMount() {
/* We are loading the map here whether or not load has loaded */
this.map = L.map('map', {
center: [50, 10],
zoom: 3,
minZoom: 2,
maxZoom: 11,
zoomControl: false,
attributionControl: false,
scrollwheel: false,
legends: true,
infoControl: false,
});
console.log("getbounds", this.map.getBounds()); //WORKING BUT JUST ONCE, when this component mounts.
this.map.on('zoomend', function (layer,a) {
console.log("zoom",layer.target._zoom)
console.log("zoom",layer)
console.log("a",a)
console.log("getbounds", this.map.getBounds()); // NOT WORKING, this.map GETS UNDEFINED which is obvious also.
});
/* Giving zoom control a different place in UI */
L.control.zoom({ position: 'topright' }).addTo(this.map);
L.control.scale({ position: "topright" }).addTo(this.map);
/* Selecting and showing styles for the map */
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
}).addTo(this.map);
}
Just change this part of your code bro
this.map.on('zoomend', (layer,a) => {
console.log("zoom",layer.target._zoom)
console.log("zoom",layer)
console.log("a",a)
console.log("getbounds", this.map.getBounds()); // NOT WORKING, this.map GETS UNDEFINED which is obvious also.
});
The reason why your code did not work is you were using simple function as a callback which need to bind to use this.
Solution: Use arrow function
I'm trying to center the map by given bounding box. On OpenLayers FAQ is even an example of it (with the swissProjection) but it just don't work. Looked around in some forums and just can't figure out how to make it work.
Maybe someone knows.
Here is the code:
var extent = [-9022321.0707,3022167.2243,-8849726.2608,3148441.1951];
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
extent: extent,
units: 'm'
});
ol.proj.addProjection(projection);
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: projection,
center: [0,0],
zoom: 0
})
});
Your code is correct but the center is out of range from your extent. There's two way to fix it.
First, set valid view center and level.
e.g.)
view: new ol.View({
projection: projection,
center: [-8936023.66575, 3085304.2097], // guess it's the center of extent
zoom: 8 // whatever you want.
})
Second, use View.fit instead setting extent on Projection.
var projection = new ol.proj.Projection({
code: 'EPSG:3857',
//extent: extent,
units: 'm'
});
...
map.getView().fit(extent);
I want to use the pre coded example popup http://openlayers.org/en/latest/examples/popup.html for MY map. I have a .shp (shape file) converted to GEOJSON format. I want the code to be replaced for adding same type of pop up to my map.
note:i altered this code n changed url. but this doesn't work.
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/' +
'mapbox.natural-earth-hypso-bathy.json',
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
I have two types of map tiles, and I want to be able to switch between them using layers with a custom html control. Both will have the same tilesize and the other options that I have set. The only difference is that one is located in normal map folder and the other in gridmap folder.
This is the code that I use to display one map:
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 2);
L.tileLayer('normalmap/{z}/{x}/{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
tms: false,
continuousWorld: true
}).addTo(map);
I tried to follow the leaflet example: http://leafletjs.com/examples/layers-control.html
But no luck.
Can someone explain to me how to add 2 maps with a custom control?
Keep a reference to both your tile layers and add/remove them as appropiate:
var map = L.map(...);
var tilelayer1 = L.tileLayer('map1/{z}/{x}/{y}.jpg', { ... });
var tilelayer2 = L.tileLayer('map2/{z}/{x}/{y}.jpg', { ... });
tilelayer1.addTo(map);
document.getElementById('switch-layers').addEventHandler('click', function(ev){
if (map.hasLayer(tilelayer1)) {
map.addLayer(tilelayer2);
map.removeLayer(tilelayer1);
} else {
map.addLayer(tilelayer1);
map.removeLayer(tilelayer2);
}
})
Keep in mind that you can create layers and not add them to the map right away.