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);
Related
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,
})
});
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 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
})
});
According to the documention a marker is optional with an infoWindow, so how is this achieved please? I have tried infowindow.open(map) and infowindow.open(map,null) but both produce nothing.
If the position is set, there is no problem showing the info window
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 55.6761, lng: 12.5683},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var infowindow = new google.maps.InfoWindow({
content: "Copenhagen"
});
infowindow.setPosition({lat: 55.6761, lng: 12.5683});
infowindow.open(map);
}
infowindow.open(map) makes no sense since you need to specify the position where the infowindow should open, also it has a tapered stem which specifies the location where it should point.
According to the documentation of Infowindows- InfoWindows may be attached to either Marker objects (in which case their position is based on the marker's location) or on the map itself at a specified LatLng.
So if you donot want the marker to open the infowindow, use the map click event-
var iwindow= new google.maps.InfoWindow;
google.maps.event.addListener(map,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,this);
iwindow.open(map,this);
});
And to close a InfowWindow- infowindow.setMap(null);
Hope that cleared your doubts.
Since the api has changed, it is not possible to set position on info window any more. the solution i found is to add a marker to the map with visibility false:
this.map.addMarker({
position: {
'lat': sites[0].latitude,
'lng': sites[0].longitude
},
// setting visible false since the icon will be the poi icon
visible: false
}).then((marker: Marker) => {
this.htmInfoWindow.open(marker);
});
I have the the following Lat Long coordinates (in a JS array), how can we draw the Google Map with markers on these coordinates.
Please give a simple example, as the examples in the API documentation do not really give a conclusive answer or are too complex for me.
43.82846160000000000000, -79.53560419999997000000
43.65162010000000000000, -79.73558579999997000000
43.75846240000000000000, -79.22252100000003000000
43.71773540000000000000, -79.74897190000002000000
Thanks in advance.
You may try this
var map,
locations = [
[43.82846160000000000000, -79.53560419999997000000],
[43.65162010000000000000, -79.73558579999997000000],
[43.75846240000000000000, -79.22252100000003000000],
[43.71773540000000000000, -79.74897190000002000000]
];
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent('Current location is: '+ locations[i][0]+', '+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
DEMO.
I have worked with google maps and if you just need to place a few markers (make sure you are using API v3) v2 is depreciated and will fall off at some point. Next, your lat/long coords. They need to be clipped down to 9 or 10 chars. I have been unlucky when I go with super-long lat/long Coords values.
Google has a nice tool that lets you build a map with. Start here:
https://developers.google.com/maps/documentation/javascript/
Realize you will need a key on your webhosts domain. You can get your key here:
https://developers.google.com/maps/signup
A long list of demos, with 65 v3 API examples.
https://developers.google.com/maps/documentation/javascript/demogallery
In the demos i found this example which looks to be close. Reuse the code you find by viewing the source. You can see the lat/long coord pairs and how it calls it with this link.
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/js/data.js
Here is a campus map example.
http://beta.gr-3.net/map-api/
Finally, here is the simplest example. A one marker map. Look at the source and reuse it. Hopefully it will be enough to get you started.
https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple
I hope all this is helpful.
First, you would create google maps object, somewhere within head tag you would listen for ready event and in the handler have:
var mapOptions =
{
zoom: 10,
center: new google.maps.LatLng( <%= #drawings.first.latitude %>, <%= #drawings.first.longitude %> ),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
This assumes you have a div in your html with id map_canvas.
Than you should be ready to add markers to the page, you should have your coordinates stored in an array, so you can iterate through it and those markers.
for( var i=0; i < coords.length; i++ )
{
latlng = coords[i].latitude + ", " + coords[i].longitude;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '',
icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(coords.length + 65) + ".png"
});
}