Im trying to bind geoserver WFS GetFeature request with BBOX and adding the geojson layer to Mapbox map object so that whenever map is panned and zoomed in/out, the geojson data within the map screen visible window will be downloaded and rendered instead of loading entire table geojson data. Here is the code snippet.
function geturl(){
return 'http://localhost:8080/geoserver/demo/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=demo:assets&outputFormat=application/json'
+'&bbox='
+map.getBounds().getSouthWest().lat+','
+map.getBounds().getSouthWest().lng+','
+map.getBounds().getNorthEast().lat+','
+map.getBounds().getNorthEast().lng
}
map.on('load', () => {
map.addSource('city_assets', {
type: 'geojson',
data:geturl()
})};
Although I could see the points were loaded only in the viewing BBOX window for the first time, I don't see rest of the point data being downloaded and rendered when I zoom in/out or pan around.
It would be really helpful if someone can guide me if I have missed anything to make it working. Please feel free to ask for additional info. Thanks.
-Prem
Related
my LeafLet map contains a GeoJSON and a Maptiler layer.
First I set up my map by var map = L.map(...). Right after that I add my GeoJSON layer. Then I load my map style via AJAX, change a few things in it, and finally add it to the map as well.
After the map is initialized, both layers seem to have a mismatch in zoom and pan (see image).
I just figured out that the Mapbox-GL-LeafLet-plugin (https://github.com/mapbox/mapbox-gl-leaflet) which is advised by Maptiler, is not working for me.
When I use an open, unstyled TileLayer, the problem is gone.
I am using Australian government map data found here: Victoria, Australia locality data, which is provided in the EPSG4326 projection.
When I try to use the data with leaflet, of course, my data is a bit distorted due to the earth's curvature - so my data is not represented properly on the screen because the maps are using a different projection to my data.
I have tried to force the map to use EPSG4326 by setting it in Map options and also in the TileLayer, as shown here:
var gisLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//subdomains: ['0', '1', '2', '3'],
attribution: 'openstreetmap',
reuseTiles: true,
updateWhenIdle: false,
crs: L.CRS.EPSG4326
});
var map = L.map('map', {
center: [-28.5, 135.575],
zoom: 4
,crs: L.CRS.EPSG4326
});
map.addLayer(gisLayer);
but when I do this, the maps do not display. I don't believe the map tiles have been generated for this projection. That said, there is a suggestion in the docos here that it might be possible, but I couldn't get this working. (Did I just get the configuration wrong?)
It seemed like it was working when I retrieved the data and placed it on the map, but when I got the map bounds to select the data for the visible region, it also showed distorted. So I tried to convert the map bounds to EPSG4326 manually, to pass that to the database, as follows:
var bounds = map.getBounds();
var coords4326_NE = L.Projection.SphericalMercator.unproject(bounds._northEast);
console.log(coords4326_NE);
but that broke the code. I was passing the wrong structure in and I couldn't get this right either.
Of course, I would also accept transforming every point returned from the database to the default projection, which I think is EPSG3857. But I am having doing this as well.
I have provided as jsFiddle here where I have been attempting to do the above.
Does anyone know how I can achieve this?
Your GeoJSON data is encoded in WGS84, which can be simply plotted on EPSG4326, but is also the expected input for EPSG3857 (Web Mercator).
From that Wikipedia article:
While the Web Mercator's formulas are for the spherical form of the Mercator, geographical coordinates are required to be in the WGS 84 ellipsoidal datum.
Therefore, you do not have to change anything to plot your data onto a regular Leaflet map, using regular tiles (from OSM or Mapbox, which provide tiles only for EPSG3857).
I'm trying to use a Mapbox style in my map. The style loads fine, but it seems to be way off. My GeoJson file should load points in California, and it works fine with other tilesets, but using the Mapbox dataset it loads somewhere north of Canada in the arctic circle. This seems like it's probably a problem with projections. The GeoJson file is in WGS84, which I believe is the Geojson default. The setview centers the view on the US using other tilesets but also centers the data north of Canada using Mapbox data. Here's the bit where I include the Mapbox data
L.mapbox.accessToken = 'correct token';
var map = L.mapbox.map('map')
.setView([43.64701, -79.39425], 4);
L.mapbox.styleLayer('mapbox://styles/mapbox/light-v9').addTo(map);
Leaflet uses LatLng rather than mapbox's LngLat. Do you want your data to be around [43.64701, -79.39425], or around [-79.39425, 43.64701]?
See also Tom MacWright's explanation on why some libraries/formats use lat-lng and some use lng-lat.
Say I have a geojson box I've added to leaflet. How can I allow the user to "click and drag the box" to a new location, which in turn updates all the coordinates automatically? I know how to edit the boundary/points that make up the shape using leaflet editing, but am not sure how to actually move the shape.
There is a Leaflet.Draw.Drag plugin for Leaflet Draw that allows you to move polygons when you enter edit mode. It does seem to be a bit finicky about the version, though. At least in a few quick experiments, I was only able to get it to work using Leaflet Draw version 0.2.3. If you have an existing L.GeoJson layer, you can simply specify that as the featureGroup in the edit options of the draw control:
var drawControl = new L.Control.Draw({
edit: {
featureGroup: yourGeoJsonLayer,
edit: {
selectedPathOptions: {
maintainColor: true,
moveMarkers: true
}
}
}
});
In the selectedPathOptions, the maintainColor option just keeps the existing style of the layer while you're editing, and the moveMarkers option places a little square marker in the middle of the polygon as a reminder that you can drag the whole thing rather than just edit the vertices.
Here is an example fiddle:
http://fiddle.jshell.net/nathansnider/qk5bsgn8/
I'm using leaflet.draw, and when a rectangle is created, i'm fetching rectangle's data using layer.toGeoJSON(), and then i save it into a db using ajax.
After that, when the user display the map again, i'm loading previously saved data, and push them into the featureGroup reserved for leaflet.draw using L.GeoJSON.geometryToLayer()
Problem is that my previously created rectangle is now a real polygon for leaflet.draw.
"Rectangle" does not exist in geoJson specs, so i can understand that.
Now, in "properties" of the geojson, i know that the previous shape was a rectangle, with the "type" attribut.
My question is : is there a way to force a shape to be a rectangle in a leaflet.draw point of view ?
Thanks in advance !
I ran into this same problem and have come up with a solutions which works for me although it isn't the most elegant method.
Using leaflet.draw I receive a new layer on which I call layer.toGeoJSON() to save the rectangle to my database. On refresh of the page I'm pulling that GeoJSON representation back from my database and storing it with:
var geojson = JSON.parse(geojson_string);
What I tried first was to build my own Rectangle from the points and add it to drawnItems.
var bounds = L.latLngBounds(geojson.geometry.coordinates);
var rect = L.rectangle(bounds);
drawnItems.addLayer(rect);
This code did not throw an error, but it also didn't show a rectangle on the map. After further investigation I found the coordinate pairs output from layer.toGeoJSON() and the coordinate pairs needed by L.latLngBounds() were reversed (i.e. one was [lat, lng] and the other was [lng, lat]) which caused the Rectangle to be created but in entirely the wrong location. To get around this I constructed the layer first as a GeoJSON layer which results in a polygon, but then use that representation's bounds to construct my Rectangle.
var geojson_layer = L.GeoJSON.geometryToLayer(geojson);
var rect = L.rectangle(geojson_layer.getBounds());
drawnItems.addLayer(rect);
This successfully creates a Rectangle which leaflet.draw recognizes and allows for the edit tools to work correctly.