In OL3, vector data layer not visible after map setCenter or zoom - zooming

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.

Related

flutter_map WMS with custom CRS fails to load map image: Failed to decode Image data

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!

Vue 3 google map circle is not being removed from the map

Vue 3 google map circle is not being removed from the map
I am currently migrating from Vue 2 to Vue 3.
In Vue 2 I could remove circles,
but in Vue 3 I run into the problem that the circles first disappear when removed.
But when zoom-in and zoom-out they reappear.
I do use the .setMap(null) method for removing the circles.
I use the circles to show a geofence for a POI (point of interest) and
This geofence also has a marker in the centre and I can remove the marker without any problems.
Has anyone else encountered the same problem?
Is this a problem people also run into in other frameworks?
How I create the map circles and markers
public LoadPoiMarkersAgain (
googleMapLoader: IGoogleMapLoader
): HTMLMapMarker[] {
const markers: HTMLMapMarker[] = []
for (let i = 0; i < googleMapLoader.mapPoiData.length; i++) {
const marker = createHTMLMapMarker({
latlng: new google.maps.LatLng(
{
lat: googleMapLoader.mapPoiData[i].latitude,
lng: googleMapLoader.mapPoiData[i].longitude
},
null,
true
),
map: googleMapLoader.map,
data: googleMapLoader.mapPoiData[i],
html: this.CreatePoiMarkerHTML(
googleMapLoader,
googleMapLoader.mapPoiData[i]
)
})
const markerCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: googleMapLoader.map,
center: new google.maps.LatLng(
{
lat: googleMapLoader.mapPoiData[i].latitude,
lng: googleMapLoader.mapPoiData[i].longitude
},
null,
true
),
radius: googleMapLoader.mapPoiData[i].radius
})
this.AddClickListenerToPoiMarker(marker, map)
markers.push(marker)
markerCircle.set('poiId', googleMapLoader.mapPoiData[i].poiId)
googleMapLoader.mapCircles.push(markerCircle)
}
return markers
}
How I remove the circles
public RemoveMapMarkersData (
googleMapLoader: IGoogleMapLoader
): void {
if (googleMapLoader.mapCircles.length > 0) {
googleMapLoader.mapCircles.forEach(
(element: google.maps.Circle) => {
element.setMap(null)
}
)
googleMapLoader.mapCircles = []
}
// Some more code to remove markers
}
What i have tried
attempt 1
I tried using
element.setVisible(false)
This does not work either.
attempt 2
I tried changing the order for when the circle is removed versus the marker.
This does not work either.
attempt 3
I also tried removing the circle
Immediately after, I added them to the map.
That does seem to work.
public LoadPoiMarkersAgain (
googleMapLoader: IGoogleMapLoader
): HTMLMapMarker[] {
// previous code
googleMapLoader.mapCircles.forEach((circle: google.maps.Circle) => {
circle.setMap(null)
})
// previous code
}
Could it be that Vue 3,
Is not passing the references correctly to my method?
Package
enter link description here
Google documentation
Google docs remove circle
Google docs remove marker
Extra
I have a gif that demonstrates the problem.
When I drag the map it should remove the circle.
But when zooming in and out, the circle reappears.
https://i.gyazo.com/b7310cc4d748da36e026104aff6cb2fe.gif
I have also created two sandboxes to demonstrate the problem:
(When you move your mouse out of the map, the circles will be removed)
Vue 2
Vue 2 + google maps
Vue 3
Vue 3 + google maps
I believe I encountered the same issue whilst migrating from Vue 2 to Vue 3, where markers were successfully being removed upon setVisible(false) but were then reappearing upon zoom.
Seeing console errors relating to Proxy led me to believe that the cause of the issue was due to the differences in the reactivity systems of Vue 2 and Vue 3 (helpful article on Vue 3 reactivity).
For me the fix was to use markRaw() when creating the map, which essentially returns the Map Object itself without converting to a proxy.
<script>
import { markRaw } from 'vue'
export default {
methods: {
initMap () {
map = markRaw(new google.maps.Map(document.getElementById("map"), {...}))
}
}
}
</script>
Sadly enough I could not fix the problem in proper way,
but I have a place holder solution for now.
My place holder solution is to remove the map when removing the circles and markers. After removing the map I render / reinitialise the map again.
Vue 3 - remove map when removing circles
If I can remove the circles and markers as intended by google,
Then I will post an update on this again.

How do I add Polylines to a Google Map app in Flutter?

I have a map app that I am building in Flutter and I want to add a campus map, which will be an overlay from a remote kml file eventually. In the first instances I just want to show something on the map, so I grabbed some co-ordinates form that kml file and added them to a List.
List<LatLng> building = [
LatLng(-2.2320211911239767, 53.475459515730925),
LatLng(-2.231763699058547, 53.47504046853617),
LatLng(-2.231605784002795, 53.47507219654),
LatLng(-2.2317965561189794, 53.47536812388608),
LatLng(-2.2317697340288305, 53.47537251389184),
LatLng(-2.231845506433501, 53.475498626591325),
];
I have a set of type markers and a set of type polyline
final Set<Marker> _residences = {};
final Set<Polyline> _campusOverlay = {};
I have this code in my _onMapCreated method
setState(() {
//Show Sample Building Marker
/* _residences.add(
Marker(
markerId: MarkerId('Building'),
position: _userLocation,
infoWindow: InfoWindow(
title: 'This is the title', snippet: 'This is a snippet'),
icon: BitmapDescriptor.defaultMarker,
),
);*/
_campusOverlay.add(
Polyline(
polylineId: PolylineId('Building'),
visible: true,
points: building,
width: 2,
color: Colors.red,
),
);
});
In my GoogleMap widget, I have added the markers and polylines properties.
GoogleMap(
onMapCreated: _onMapCreated,
polylines: _campusOverlay,
markers: _residences,
...
...
The marker(commented out atm) shows with no problems, but the polyline doesn't. I have seen a number of articles with this code, and I have no build errors, so I am confused as to why nothing is shown.
Am I missing something really obvious here?
[EDIT] -> Added screenshot. The co-ordinates were added to google maps (proper) and this is was is expected.
The issue wasn't with the code, but more the co-ordinates. I grabbed them from a remote KML file that I have access to. Below is an example.
-2.2346792602577352,53.46763821573774,0
I have restricted the map to my city and these co-ordinates are in the middle of the Indian ocean. These seem to be the correct way around.
53.46763821573774, -2.2346792602577352
What I can't understand is how the KML file shows the the overlay at the correct place at the moment. Not the final answer to my problem as I want to read this remote KML file and display the overlay, but for the time being, this is answered for what I wanted to do.

openlayers 3-4 regression tile visualization

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.

OpenLayers, how restricting WMS layer extent

I'm able to create an OpenLayers Map with maxExtent and restrictedExtent properties.
Also I have play with WMS layer and its maxExtent property, but the problem comes when use singleTile in the WMS layer.
What I want is to have a WMS layer that gets only one image from server but restricted to the bounds I want. Because this I used singleTile=true, ratio=1 and maxExtend=my_desired_extent.
But it always request the whole map view.
Any ideas how to achieve it.
Thanks in advance.
Next code shows a map with a base layer and a costline line layer I would like to use in singleTile mode and limiting the are they must request to WMS:
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<div id="map" style="width: 700px; height: 500px;"></div>
<script type="text/javascript">
var map = new OpenLayers.Map("map");
var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'basic'
});
map.addLayer(wms);
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false,
maxExtent: OpenLayers.Bounds.fromString("-10,-90,30,90")
});
map.addLayer(restricted);
map.setCenter(new OpenLayers.LonLat(0,40), 3);
</script>
I'm looking at OpenLayers source and seems what I want is not implemented so I need to create some WMS subclass or redefine some WMs layer methods.
I would appreciate any help.
Thanks.
If you are looking at restricting the whole map to the extent your talking about and not allowing users to pan outside of the extent you can try something like the following.
var extent = new OpenLayers.Bounds({-10,-90,30,90});
function init() {
var options = {
restrictedExtent: extent
};
map = new OpenLayers.Map('map', options);
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false
});
map.addLayer(restricted);
The difference here is that I have set the extent on the whole map not just the layer. Note that you will need to control the maximum zoom level as well. If you don't a user can still zoom out and data passed the extents will be shown though they will not be able to pan the view on the map.
If you want the map to pan outside of the extent specified but just not that layer then there are a number of approaches.
If you have access the the WMS server that the layer is served from you could add a setting there to restrict the extent of the layer server.
Check this link http://docs.geoserver.org/latest/en/user/webadmin/data/layers.html and read the "Bounding Boxes Section"
If you don't have access to the WMS server and you just want to restrict the area that is requested from the WMS server from the client side you could try using the OpenLayers.layer.WMS class with a different strategy. See below for an example:
var myfilter = new OpenLayers.Filter.Spatial({
type: OpenLayers.Filter.Spatial.BBOX,
value: OpenLayers.Bounds.({-10,-90,20,90})})
var filterStrategy = new OpenLayers.Strategy.Filter({filter: myFilter});
var restricted = new OpenLayers.Layer.WMS("Coast Line", "http://labs.metacarta.com/wms/vmap0",
{
layers: 'coastline_01,coastline_02'
},
{
opacity: 0.6,
singleTile: true,
ratio: 1,
isBaseLayer: false,
strategies: [filterStrategy]
});
map.addLayer(restricted);
Please note that I have not tested this code and it may take a little refining to get it to work.