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

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

Related

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

Draw custom shape on Google Map and store into Oracle database using C#

Is it possible to make a Custom shape (Using Mouse) on the Google Map using Gmap library in C# and then save it into the database and on the client request draw the stored shape on Google Map again? Is there any possibility for doing such operation in any other library or in Gmap (I am not expecting the code. Just an overview of doing it.)?
Oh Boy....this is absolutely doable! And I do it on day to day basis! Let me share how I achieve it. Another thing to keep in mind that this works for Google Maps and Bing Maps.
First, you have to represent Maps as not just coordinates but as collection of small squares. Now what do I mean by that?!
Have a look at this following picture. It's image of Czech Republic on google maps.
Now Czech Republic a.k.a Czechia, on google maps can be seen as collection of smaller square images or grids. You need to understand this concept very well in order to make this idea work. Now take a look at the following image where it shows how the image of Czechia on Google Maps can be visualised as collection of small square boxes or grid. These small square boxes hold images of parts of Czechia.
If you want to Zoom into a co-ordinate Xm,Ym (Easting:Xm, Northing:Ym), which is a place in Czechia and the name of that place is "Hermanuv Mestec" (as shown in the above picture) then you need to choose the bounding small box with co-ordinates (X1,Y1),(X1,Y2),(X2,Y1)&(X2,Y2), and fetch the underlying images in that box. This feature to fetch underlying images within that bounding box is actually Zooming In. So when you Zoom In or in other words fetch the underlying images within that bounding box, you get something as the following image:
Now, I hope you got the underlying concept of how Zoom In or Zoom Out (reverse process) and mapping co-ordinate system works if you want to achieve what you want to achieve because this concept is very important to grasp before you proceed.
You need to write a program which can do this transformation. And as of your question how to achieve this as follows:
Step 1: Use a Panel (Control) on Windows Form or WPF or asp.net application, which you are building.
Step 2: Use GMap Library in C# to fetch the image within a bounding box as mentioned above and populate/draw that image on the Panel.
Step 3: Have a function that tracks mouse events on the panel. This function/method will track the X,Y position of mouse move event on the panel and use Panel Drawing tools to draw objects on the panel based on this.
Step 4: Write another program to transform these mouse X,Y positions on the panel to co-ordidnates on the map. This piece/part of the program is important because this is what enables you to translate your representation of small square image breakdowns of maps into panel drawable objects, so that you can draw them again and again in future if saved properly in the database.
Step 5: When you draw an abject on the panel you track the X,Y mouse bounds on the panel and transform those points into co-rodinates using your custom program and then you save the co-ordinates in the database table.
Thats it! And in case you need to draw the same object saved in the database, you first need to fetch/draw the google maps image on the panel again, then need to fetch that shape of the object from the database by fetching the co-ordinates of that object saved in the database table, use your translation program to convert those co-ordinates into panel drawable points and draw the object back on the same panel.
Now, you can write this translation program (Easting Northing co-ordinates to Drawing Panel co-ordinates) yourself, which might take good few months or at least some time. Or you can buy customised program specialised to achieve this exact same function for a good amount of price.
Hope this helps.
You can also achieve this with Google Maps drawing object with JavaScript as mentioned in another answer but the issue is with the translation and saving the coordinates in the database. It's much faster and responsive in this aforementioned method. Anyway, this is how I do this, so kind of personal opinion.
Technologies required for the aforementioned technique is as follows:
Google Map Library/Bing Map Library (whichever you choose)
C# with .Net Framework 3.5 or above (.net framework lesser than this is also fine but may require bit more lines of code to achieve some functionality if you want to achieve complexity in this)
SQL Server Management Studio or anything equivalent depending on
the type of database and query you are planning to use.
I think you want to make a map overlay, and you can use Goggle Drawing Tools in conjunction with your map. See: https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
This will create the overlay. Presumable you could write javascript code that would save the coordinates and attributes of the overlay to a hidden field once you hit a "Save button" . Then after form submission you could save this info to a database using standard techniques, and then when rendering the map the next time, insert the overlay info into the javascript output by your page,
I am not going to spend the time making this for you, but this is the approach I would take.
steps:
1) Get the geometry/shape out from google api.
2) Send/post to server using some popular exchange format, GeoJSON or WKT
3) Prepare a server's service/asp/web service to accept the request and translate/validate those geometries into Oracle SDO_Geometry user define type/struct.
4) Use some C# oracle library,
a) create Connection,
b) create command with parameter,
c) Initial an OracleObject, assign all the required properties like SDO_GTYPE, SDO_SRID.
d) Assign the OracleObject to the the named parameter in the command.
e) Execute the command and commit.
Hope this help.

Mapbox GL - draw and animate several points/symbols

I'm trying to add real-time, web-socket event-based data to my map.
Everytime I get a point, I must add it/update it on map.
What's the best option?
A) Create a FeatureCollection and add a source and respective layer. When updating, change the FeatureCollection and call setData();
B) For every point, create a different source and layer. When updating, just change the respective source and call setData();
I really don't believe B) is the best option, I'm just not sure about the perfomance of option A) (or I'm thinking about the former the wrong way).
I'd say it somewhere between the two. For Mapbox Draw I use two layers, one for features that are being edited and one for features that aren't changing. In your case, you'd want to create a layer for every 100 features. This is because Mapbox GL has to recut the geojson into tiles every time you add a feature so limiting the number of features that have to be reviewed is wise. That said, lots of layers will be a problem too.
While I said 100 features above, you'll want to play around with this number a bunch. It will be about finding the right balance between number of layers and number of features in a source.

how save leaflet draw 's data custom toGeoJSON?

leaflet use FeatureGroup() for edit. and I want to save data use toGeoJSON.but circle,marker... have point info only.
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.49561691284181,31.87595414652557]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.5268591952,31.848500597]}}]}
I need save more info.how?
Strictly speaking saving this kind of data "to GeoJSON" is not possible because simply GeoJSON does not support circles.
GeoJSON supports the following geometry types:
Point, LineString, Polygon, MultiPoint, MultiLineString,
MultiPolygon, and GeometryCollection.
The old 2008 GeoJSON spec says nothing about circles http://geojson.org/geojson-spec.html
and neither the new one (august 2016) https://www.rfc-editor.org/rfc/rfc7946
If you want to save a point and its radius to represent a circle you need to make a format of your own, but this of course will not work out-of-the-box with leaflet's geojson layergroup.
Edit: seems some people went down that road already so you may wanna check this out:
https://github.com/Leaflet/Leaflet.draw/issues/390
They saving the radius in the properties of GeoJSON and extended the GeoJSON layergroup to work with that. A bit hacky, geojson spec goes down the drain, but it seems to accomplish what you want.
Another possibility is to convert your circles to polygons with an acceptable amount of nodes, then saving that polygon in GeoJSON.

How do draw polygons which can be used with OpenLayers?

I can draw custom shapes using polygons in Inkscape. My goal is to display these shapes on top of the map of the US at fixed positions. The map and the polygons will display on a webpage with the ability to zoom in and out and pan. I wanted to know if these polygons can be placed on such a map using OpenLayers. How? Example anywhere? I am not familiar enough with OpenLayers and would learn it more if it can meet my requirements. I need to programmatically be able to color fill each shape either server or client side. I also want to place markers on the map based on lon/lat coordinates. Does OpenLayers support all this?
This is an example of what I want to do. The area in orange was defined in Inkscape and the color orange can be a different color set programmatically. This is a simple svg file displayed on the web page.
You should be able to treat the exported SVG as a regular image overlay. Here is the OpenLayers API for image overlays and here is another SO answer with a very basic image overlay example. OpenLayers supports markers, though if you're embedding the SVG as a flat image, I'm not sure if OpenLayers will allow you to style the SVG elements out of the box...
As an aside, Polymaps is an alternative mapping library that's slightly more SVG-oriented; it's especially good for stuff like dynamically transforming SVG layers based on data, manipulating styles and classes for SVG elements, etc. Per your example, here's their example for very simply throwing an image (with defined top-right / bottom-left coordinates) on a map.

Categories