Editing a shapefile uploaded using leaflet.shapefile - javascript

I'm using Mapbox with Leaflet for drawing, editing and removing polygons etc. There might also be a case in which the user might have zipped shapefiles and want to use that directly, instead of drawing the polygons. So I'm using leaflet.shapefile to upload shapefiles and add them to the map.
But when I try to edit the shapefiles using the Leaflet Draw control, I get an error telling me that "i.editing is undefined". I tried converting the layer to GeoJSON before adding it to the featureGroup just in case (like in the code below), to see if that had any effect, but it didn't.
var layergeojson = layer.toGeoJSON();
featureGroup.addLayer(layergeojson);
This is a jsfiddle of what I have right now. I tried researching online to see any similar cases, but I'm not able to find any.
Is it possible to edit the uploaded shapefiles using the Leaflet Draw control?

When you do var layergeojson = layer.toGeoJSON(), the layergeojson now contains a plain GeoJSON object, not a Leaflet layer.
Therefore, featureGroup.addLayer(layergeojson) should throw an error (open your browser console). Instead, you should probably use the .addData() method: featureGroup.addData(layergeojson).
As for editing your resulting layers, it might be related to this: https://gis.stackexchange.com/questions/203540/how-to-edit-an-existing-layer-using-leaflet/203773#203773

Related

Mapbox getCanvas().toDataURL() not rendering markers

I'm trying to obtain a picture of a map using Mapbox. This should be very simple using
map.getCanvas().toDataURL(); The catch is that I have markers on my map and these are not present when I obtain the image using the method mentioned above.
This is an example of what I'm experiencing: https://codepen.io/loskiorama/pen/YzeeMqm
Is there any way I could get a "screenshot" of my map that includes the markers?
I'm bundling this on a single js file so I can't use solutions like html2canvas as I'd like to keep my file as small as possible.
Thanks!

ngx-mapbox-gl Mapbox GL Popup with Feature layers and not with Markers

I am creating a Mapbox GL page using ngx-mapbox-gl. I am using GeoJson Feature layers to create clusters and individual points. My code is based from this example
https://wykks.github.io/ngx-mapbox-gl/demo/cluster
This is using Features and not Markers to display points.
I would now like to further extend that example to allow popups for individual points. I don't know exactly how to do that. The examples show adding a popup directly attached to a Marker.
Interestingly enough, the exact functionality I am looking for is located by viewing a geo json file directly from GitHub.
https://github.com/Wykks/ngx-mapbox-gl/blob/master/projects/showcase/src/app/demo/examples/earthquakes.geo.json
Popups are displayed for individual points. I'm assuming those points are in the form of a Feature layer? Does anybody know where I can get the source for that viewer or help me with adding popups to Feature layer in ngx-mapbox-gl?
Thanks, Mike

Any suggestions on how to remove multiple features from geojson file quickly?

I have a geojson file I would like to simplify. It currently contains about 33,000 records. The file is of all the roads in the state of Nevada and I would like to be able to remove the roads in cities(i.e. Las Vegas) because it is taking up a chunk of data, when those roads are easy to see from a leaflet map so they don't need to be drawn.
I have tried to use geojson.io and other geojson generators to try and remove the roads but it will take way too much time to manually delete all these roads individually. I was hoping there would be a something similar that I could draw a rectangle over the area I want to delete and it would remove all of those features.
EDIT
I have tried to simplify the layer with http://mapshaper.org/ but the file is still to large. If I try to simplify it more, the resulting roads would not be very accurate.
There are many ways that you can do this, but since you have already used mapshaper to simplify, we can use mapshaper to clip or erase features.
Using geojson.io I created a quick bounding box geojson called clip.json - with this I can remove features outside or inside of this feature from the roads geojson file. While I created a geojson to use to clip/erase features, you could use a pre-existing file the same way.
Drag both geojson files into mapshaper.org. Toggle the view of the road geojson (as only one layer is shown at at time, the current layer is displayed on the top ribbon and can be changed by clicking on the name.)
Once viewing the roads geojson, open the page's console window (top right of the page) and type:
erase clip.json
This will give you something like (using Nevada and a basic bbox for Las Vegas):
Now you can easily export the file and use it as needed.
To achieve the opposite effect, you would use clip: clip clip.json

Finding Self-Intersections in Leaflet polygons using JSTS Library

I'm using Mapbox with Leaflet Draw, and I would like to avoid self-intersecting polygons.
I can already specify to not allow intersections while creating the draw control, but it only works when I use the control to create a new polygon. However, if I try to edit an already existing polygon, it allows intersections over there.
I searched around and found the JSTS Library which does exactly what I want, and I also found this JSFiddle to use as an example, where it works based on the Google Maps API.
So I created my own JSFiddle with Mapbox based on the above two links. Here, the 'findSelfIntersects' function kicks in if it's a polygon edit, and it is not used if it is a new polygon. The idea is that, if there's an intersection, I'll show an alert to the user and cancel the edit. However, when I try to do this, I'm getting an uncaught exception: [object Object] error.
The error seems to be formed on this line of the findSelfIntersects function:
var shell = geometryFactory.createLinearRing(coordinates);
I checked out the coordinates returned by the Google Maps example, and that does seem similar to the coordinates I'm getting. But I'm not sure why I'm getting this error.
I just noticed that in the Google Maps example, the starting and ending points were the same in the coordinates array, whereas mine weren't. I had missed it initially. Now I've added the below code after the 'for' loop, and it works fine.
coordinates.push(new jsts.geom.Coordinate(
corners[0].lat, corners[0].lng));
This is an updated JSFiddle in case anyone wants to use the JSTS library with Mapbox/Leaflet.

Javascript polygon selector, polygon brush

I need a 'polygon' selector type functionality. Basically, the ability to drag lines to form multiple polygons; pref with the ability to edit the 'points' of the polygon after the shape has been 'closed' (but that's secondary) and/or move the polygons...
I generally dislike 'reinventing the wheel' and I figured I'd find tons of examples to work with, but I was wrong...
The polygon tool in Google Maps is just about perfect, but has anyone utilized it outside of GMaps? (I recall it required a GMap as an attribute from my work with Google Maps). Before I roll up my sleeves, I just want to ensure there isn't something already made (this is a very small part) - so if (a) Google Maps Polygon object is usable without a map, or (b) there's another library/project I'm missing please let me know.
Fabricjs is an option you can check.
Have a look at D3.js which has a great api for visualizing data and geo information. Besides the standard one-/two-dimensional brush there are plugins for more advanced types of brushes:
Polybrush. Providing a polygon brush.
lasso. Lassoing a selection by freely drawing a line path.

Categories