In openlayers 3.19.1 setting up a map like this (replace CUSTOMURL, CUSTOMX, CUSTOMY with real value), assuming that tiles are only available up to level 17:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
preload: Infinity,
source: new ol.source.XYZ({
url: 'http://CUSTOMURL/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: [CUSTOMX, CUSTOMY],
zoom: 18
})
});
properly produces a map with tiles at zoom 17 resampled to zoom 18.
With all subsequent version (also last stable version 4.1.0) an empty map is displayed.
Thanks for any help and sorry for my english....
I have noticed that in the most recent versions (tested v4.1.0) the tiles are displayed correctly by setting the maxZoom option to the highest level that the tiles are available (17 in the example). The maxZoom option must also be set for vector tiles (..... createXYZ ({maxZoom: ......}).
This is not a real regression.
However, in the documentation, the default value of 18 that is declared for the maxZoom option, according to my tests, is not actually applied.
Related
I'm trying to create a simple flutter map widget that gets layers from a WMS server.
The server is this.
And you can see the its capabilities here.
Specifically, I want to use the layer "AMS_1956-1957".
As this layer is served in the CRS EPSG:4258, I'm creating a custom CRS for this FlutterMap to use (as it's stated in the documentation that only WGS84 (EPSG:4326) and Google Mercator (EPSG:3857) projections are supported).
I'm creating this custom CRS following the instructions here.
I'm getting the Proj4 definition string for this CRS (EPSG:4258) from here, as stated in the documentation: "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs"
So the code for creating the custom CRS is this:
var resolutions = <double>[32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128];
var maxZoom = (resolutions.length - 1).toDouble();
var epsg4258CRS = Proj4Crs.fromFactory(
code: 'EPSG:4258',
proj4Projection: proj4.Projection.add("EPSG:4258",
'+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs'),
resolutions: resolutions,
);
Then I'm using this CRS in my FlutterMap widget as follows (again, based in the documentation).
#override
Widget build(BuildContext context) {
return FlutterMap(
options: MapOptions(
center: LatLng(41.61, -2.52),
zoom: 3.0,
),
layers: [
TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: 'https://www.ign.es/wms/pnoa-historico?',
layers: ['AMS_1956-1957'],
crs: epsg4258CRS,
),
),
MarkerLayerOptions(
markers: [
Marker(
width: 5.0,
height: 5.0,
point: LatLng(41.61, -2.52),
builder: (ctx) => Container(
child: const FlutterLogo(),
),
),
],
),
],
);
}
}
The pointer is shown, so I guess it's doing something, but no map image is shown, and it returns the following error:
ImageCodecException: Failed to decode image data. Image source:
https://www.ign.es/wms/pnoa-historico?&service=WMS&request=GetMap&layers=AMS_1956-1957&styles=&format=image%2Fpng&srs=EPSG%3A4258&version=1.1.1&transparent=true&width=256&height=256&bbox=180,-90,180,-90
Ok, the WMS is working, as I can access it via QGIS, for example.
If I open the "image source" url created by flutter via browser it doesn't seem to work.
Plus, the bbox values in the url doesn't seem to make much sense, as they lie outside of the CRS boundaries. And the centering and zoom values I'm giving it doesn't seem to make any effect either...
If I try to open the url with different bbox values closer to the boundaries of the layer it shows something at least:
https://www.ign.es/wms/pnoa-historico?&service=WMS&request=GetMap&layers=AMS_1956-1957&styles=&format=image%2Fpng&srs=EPSG%3A4258&version=1.1.1&transparent=true&width=256&height=256&bbox=-9.5,2.5,12,44
Although I don't really fully understand what these numbers refer to (max x, min x, max y, min y?? // top-left corner, bottom-right corner // etc. ??)
Any help on what might be happening here will be much appreciated, thank you!
I am using Ionic 3 with #ionic-native/google-maps (https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/README.md).
I am using markerCluster to populate the map with markers.
At the moment, to update the markers, I am performing a map.clear(), as it can be seen in the code below.
The problem I have is that the markers are "flashing" when the map is clearing and the new one are created. By "flashing", I am trying to say that you can see how it disappears and appears again.
Is there a way to remove a marker from markerCluster, instead of clearing the map?
I am using this code to show on map some locations with some updates.
E.g.:
the pin is green if available
the pin is blue if in used
remove pin if offline
So, I am calling the WS to get the status every few seconds and update the pins icons based on the status.
I have tried markerCluster.remove(), instead of map.clear(), but the pin is not removed from the map.
this.map.clear();
markerCluster = this.map.addMarkerClusterSync({
markers: this.markers,
icons: [
{
min: 2,
max: 9,
url: this.assetsPath + "images/pin_cluster.png",
label: {
color: "black",
fontSize: 15,
},
size: { width: 40, height: 40 }
}],
boundsDraw: false
});
Migrating a map to use OL3. When I call map.getView().setCenter or map.getView().zoom on the map, the map behaves correctly, but my vector data layer is no longer visible. I have to do a MouseWheelZoom interaction on the map and then the data layer shows up. This is similar to the issue found in this unanswered Stackoverflow post (How to reload WMTS Tiles after progromattically changing the map center and zoom?) except my map tiles render properly, it is my vector layer that is not visible.
I am creating the WMS tiles layer and map with this:
div = #get 'element'
layers = [ new (ol.layer.Tile)(
title: 'Imagery'
source: new (ol.source.TileWMS)(
url: WMS_VMAP_MAP_SERVER_URL
name: 'VMAP'
params:
LAYERS: 'basic'
FORMAT: 'image/png'
TRANSPARENT: true)) ]
map = new (ol.Map)(
interactions: ol.interaction.defaults().extend([ new (ol.interaction.Select)(style: selectedIconStyle) ])
controls: ol.control.defaults().extend([ new (ol.control.ScaleLine)(units: 'nautical') ])
layers: layers
target: div
view: new (ol.View)(
projection: 'EPSG:4326'
center: [
0
0
]
zoom: 1
maxResolution: 0.703125))
an individual feature is created using this:
feature = new ol.Feature({
geometry: new ol.geom.Point([lng, lat], 'XY'),
title: 'some title'
latitude: lat
longitude: lng
})
vectorSource.addFeature feature
the vector layer is add using this:
vectorLayer = new (ol.layer.Vector)(
source: vectorSource #new (ol.source.Vector)({})
style: circleIconStyle #my defined icon style
id: 'MYDATA'
)
map.addLayer vectorLayer
and when the following event fires...
map.on('singleclick', (e) ->
map.forEachFeatureAtPixel(e.pixel, ((feature, layer) ->
...
)
)
...as part of the event handler I am doing this:
map.getView().setCenter [
feature.get('longitude')
feature.get('latitude')
]
map.getView().setZoom 3
The map centers and zooms correctly, but my vector layer data does not show up by default. Is there something else I am not doing or calling in order to refresh the data layers after setCenter or zoom on the view? or is it something else I have incorrect in how I am setting this up?
thanx
Fixed. The issue was the coordinates were being treated as strings for the Geometry and not numbers. The fix is to ensure that where coordinates are being set, that they are explicitly treated as a number to remove ambiguity from the equation. So everywhere I set a lat/lon (or latitude/longitude) in the map code, I used Number(lat) and Number(lon) instead.
Props to Eric Lemoine for his answering of another issue located at http://comments.gmane.org/gmane.comp.gis.openlayers.devel.ol3/4773 as that is where I saw his solution to that marker display problem and thought it might address mine as well. And it did.
So, i have a problem. I had google maps street view on my site, there was a building panorama (inside), now API shows only street view near this building. Why and how can i fix it?
Here is my code:
function initialize() {
var fenway = new google.maps.LatLng(52.4980685,13.2951895);
var panoramaOptions = {
zoom: 1,
panControl:false,
zoomControl:false,
mapTypeControl:false,
scaleControl:false,
rotateControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDefaultUI: false,
addressControl: false,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM,
hide: true
},
position: fenway,
pov: {
heading: 0,
pitch: 0
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
google.maps.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
This may be a kind of bug(feel free to report it).
I guess you are talking about the place "Shebell Institut".
Let me explain why it's a bug:
Currently
the ID for this panorama is (at least for me):ag1bfIf47xUAAAGuxVUjCQ
and the location of the panorama(reported by the StreetViewService): (52.498042,13.29517199999998)
The location in your code differs a little bit, but when I use the exact location it should show the desired panorama(because it's the nearest)...but it doesn't.
Also when I query the panorama via StreetViewService.getPanoramaByLocation another panorama (with another location) will be returned, although the documentation says:
If the radius is less than 50 meters, the nearest panorama will be returned.
...but when I use the exact location it shouldn't return a panorama with another location.
I don't have a solution, because regarding to the documentation panorama-ID's are only stable within sessions.
But this must not mean that the panorama-ID must change often(I don't know what forces the change of a panorama-ID, but I can't imagine that the ID will be changed randomly).
So let's give it a try and use the panorama-ID(optionally).
set the panorama-location(fenway in this case) to
(52.498042,13.29517199999998)
request the panoramaData based on the ID (ag1bfIf47xUAAAGuxVUjCQ)
when both locations (fenway and the location of the returned panorama) are equal you may assume that it's still the ID of the desired panorama and use this panorama
new google.maps.StreetViewService()
.getPanoramaById('ag1bfIf47xUAAAGuxVUjCQ',
function(data,status){
if(google.maps.StreetViewStatus.OK===status
&&
data.location.latLng.toUrlValue()==fenway.toUrlValue()
){
panorama.setPano(data.location.pano);
}
});
Demo: http://jsfiddle.net/doktormolle/uwqvr5ee/
When it's sometimes not the desired panorama you may send a notification to the site-admin so that he may update the pano-ID.
I know it's not perfect, but it's the only approach I can think of so far(apart from a custom panorama)
For some unknown reason grid lines are appearing on my map in all browsers. I have looked for a solution but nothing seems to fix it. Every solution I have found says you need to set your browsers to compatibility mode.
function Initialize() {
var centerPosition = new google.maps.LatLng(40.747688,-74.004142);
var options = {
zoom: 8,
scrollwheel: false,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: centerPosition,
map: map![enter image description here][2]
});
};
It is a CSS problem. Your CSS is being applied to the map tiles (images).
I had a similar problem where lines appeared over the Google Map. Upon careful inspection, I found that the problem only reproduced in Chrome. There is an answer given in a similar question:
Google Maps random vertical line in Chrome
The short version is that when you zoom in and out in Chrome, a bug in the browser causes lines to appear. Hopefully, this bug will be fixed soon and this answer will be obsolete!
Also, in the case that the place on the map is Hawai'i, there is a vertical line between the islands of O'ahu and Moloka'i and a horizontal line between the islands of O'ahu and Kaua'i. These lines appear to be part of the map, for some reason, and are not the result of a browser defect.