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

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!

Related

is there possible for set rotation and scale to raster static image source in open layer 6

I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..

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.

I want to implement Google Map view to get the location that users taps

In Android I was able to call Google Places screen to let user pick a location to save it, I want to do this with flutter.
I searched and found almost nothing implement that, and I understood that now this is the the most official library (still not implement what I want to do) https://pub.dartlang.org/packages/google_maps_flutter
and it's still not finished yet (Developers Preview)
GoogleMap(
onTap: _mapTapped,
compassEnabled: true,
onMapCreated: makeController,
initialCameraPosition: CameraPosition(
target: LatLng(40.712776,-74.005974),
zoom: 12.0,
),
)
_mapTapped(LatLng location) {
print(location);
// The result will be the location you've been selected
// something like this LatLng(12.12323,34.12312)
// you can do whatever you do with it
}
I am using this in my pubspec
map_view:
git:
url: git://github.com/Eimji/flutter_google_map_view
Then you can capture onclick events on the map
mapView.onMapTapped.listen((location) {
currentLatitude = location.latitude;
currentLongitude = location.longitude;
//Show only one marker
mapView.clearAnnotations();
mapView.setMarkers(
[Marker("1", "Location", currentLatitude, currentLongitude)]);
//Do whatever you want with the chosen location
mapView.setCameraPosition(
CameraPosition(Location(currentLatitude, currentLongitude), 18));
.............
});

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.

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

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.