I am using OpenLayers Library for Showing some specific points on Map. I want to show only 10km area from the center point. Can any one help me doing this?
Here is the snippet of my code.
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
})
});
To achieve this you have to do some pre-processing before map initializing.
1- Make feature from center coordinates.
let pointFeature = new ol.Feature(
new ol.geom.Point(transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'))
);
2- Get extent of above created feature.
let poitnExtent = pointFeature.getGeometry().getExtent();
3- Buffer the extent to your desired radius.
let bufferedExtent = new ol.extent.buffer(poitnExtent, raduis goes here (In meters));
4- Use this buffered extent to initialize map.
var map = new Map({
layers: [
new TileLayer({
source: new OSM()
}),
vectorLayer
],
target: 'map',
view: new View({
center: transform([19.83752162, 52.09696925], 'EPSG:4326', 'EPSG:3857'),
extent: bufferedExtent,
zoom: 12,
})
});
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?
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.
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´m using the openlayers drawing example inside my mobile JS (qooxdoo) app and all works fine except that the drawing cursor is above the viewport
so I can draw but I don´t see the cursor and I can only see the drawing after I scroll down.
I have used this qooxdoo example as a base. I have also added all the css rules from the openlayers example to my qooxdoo styles.
Seems like a css position issue, but I can´t seem to find it.
Any help would be appreciated.
/**
* Loads JavaScript library which is needed for the map.
*/
_loadMapLibrary: function() {
var self = this;
var req = new qx.bom.request.Script();
var options = {
singleTile: true,
ratio: 1,
isBaseLayer: true,
wrapDateLine: true,
getURL: function() {
var center = self._map.getCenter().transform("EPSG:3857", "EPSG:4326"),
size = self._map.getSize();
return [
this.url, "¢er=", center.lat, ",", center.lon, "&zoom=", self._map.getZoom(), "&size=", size.w, "x", size.h].join("");
}
};
req.onload = function() {
var vector = new OpenLayers.Layer.Vector('Vector Layer', {
styleMap: new OpenLayers.StyleMap({
temporary: OpenLayers.Util.applyDefaults({
pointRadius: 16
}, OpenLayers.Feature.Vector.style.temporary)
})
});
// OpenLayers' EditingToolbar internally creates a Navigation control, we
// want a TouchNavigation control here so we create our own editing toolbar
var toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar'
});
toolbar.addControls([
// this control is just there to be able to deactivate the drawing
// tools
new OpenLayers.Control({
displayClass: 'olControlNavigation'
}), new OpenLayers.Control.ModifyFeature(vector, {
vertexRenderIntent: 'temporary',
displayClass: 'olControlModifyFeature'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Point, {
displayClass: 'olControlDrawFeaturePoint'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path, {
displayClass: 'olControlDrawFeaturePath'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Polygon, {
displayClass: 'olControlDrawFeaturePolygon'
})]);
var osm = new OpenLayers.Layer.OSM();
osm.wrapDateLine = false;
map = new OpenLayers.Map({
div: 'googleMap',
projection: 'EPSG:900913',
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}), new OpenLayers.Control.Zoom(), toolbar],
layers: [osm, vector],
center: new OpenLayers.LonLat(0, 0),
zoom: 1,
theme: null
});
// activate the first control to render the "navigation icon"
// as active
toolbar.controls[0].activate();
}
req.open("GET", this._mapUri);
req.send();
},
Please check the z-Index of the cursor's class. The best way is to modify the z-Index through Chrome's debugger console or Firebug.
Is there any live example of your application available?