Checking if object in Open Street Maps is a building - javascript

I'm using Leaflet library in my ReactJS app and I wonder if there is a simple way to recognize if object clicked by user is a building.
Idea that came up to my mind is to check map colour under clicked position.
Does it make sense?
I appreciate your help.
Colleagues in comments advised to give some use-case:
App I'm working on is meant to mark antique buildings with elevation in bad shape so city architecture management had simpler job of searching for them.
Every user of this App can mark such building. To prevent hooligans from corrupting data with senseless points on map I wanted to validate as a first step if clicked point is a building.
I hope it will clarify problem a little bit.

I wonder if there is a simple way to recognize if object clicked by user is a building.
No.
You basically want to run arbitrary point-in-polygon queries against OSM's building dataset, and I will presume that you don't want to host that dataset yourself.
The simplest way to do this is to perform queries to an Overpass API server, passing a is_in query and filtering by the building tag key. The OSM website's query feature functionality uses such a technique.
With this technique you won't have to worry about hosting the data, just about creating the right Overpass API query. Please bear in mind that the Overpass API servers are run by volunteers and their resources are limited.
The second simplest way would be to download a OSM extract of you area of interest, and run the point-in-polygon queries yourself, by whatever means you like (PostGIS' ST_Intersect, turf.js, etc etc).
If you will be using Leaflet, another approach would be to use vector tiles, and set it up in such a way that the buildings thematic layer is interactive. This will require you to be aware of the limitations of the vector tile servers.
Idea that came up to my mind is to check map colour under clicked position.
That is unreliable. Think about labels on top of buildings, or the colour of the edge of the building area, or buildings that don't render with the standard colour (e.g. places of worship, monuments).

Related

How can I display OSM maps in Flutter 'Web'?

I'm trying to create a custom map using Flutter Web that would be capable of displaying custom statistics for a place for COVID-19.
First we'll have a interface that display statistics for our entire planet:
https://google.com/covid19-map/?hl=en (Just like htisw)
Then the user can click on any country to zoom-in with probably an ease-in transition to see the number of cases in each state or province of that country. Assuming that I am able to fetch the exact co-ordinates of the epicenter in that country, I would like to deepen the shade in those parts in such a way that it lightens out as we move towards areas which have a lower number of cases.
Is it possible in Flutter Web?
I came across this plugin (thanks to this thread on SO Openstreetmap in Flutter?)
https://pub.dev/packages/flutter_map
but it doesn't explicitly say that it supports Flutter Web.
I tried fetching the tiles from OSM(Open Street Map) and displaying the maps on Flutter Web with the help of the example given in the above site https://pub.dev/packages/flutter_map#open-street-map-provider
But it didn't really display anything, maybe because a certain widget or function didn't work as expected.
According to your experience, which is the best way to achieve what I am looking for?
If possible, please describe the answer in such a way as if you were me and trying to do what I am doing.
Flutter_map doesn’t support flutter web.
You may check out the below Flutter Maps widget which has support for all the platforms including web.
https://pub.dev/packages/syncfusion_flutter_maps
Regarding the requirements you have mentioned, you can try the below things.
By dynamically changing the focal point and zoom level based on the click position, the easing effect can be achieved.
https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-zoom-level-programmatically
With the combination of dynamically adding shape sublayers on top of the tile layer and color mapping for that shape sublayers, you may achieve this.
https://help.syncfusion.com/flutter/maps/shape-sublayer#shape-sublayer-on-tile-layer
https://help.syncfusion.com/flutter/maps/shape#range-color-mapping

Recognizing an marker image for AR

I have a problem which in my eyes is on the rather simple side of image recognition. I am trying to check if in a video a certain picture is shown. I only want to provide some kind of simple Picture, e.g a logo of a company or a simple shape. If this Picture is found in the video feed an action should be started.
I have no experience in image recognition but I find many libraries detecting whole objects and faces. Finding a given image should be done way more easily, or should it? I am trying to solve this problem in JS but any starting point would be helpful.
Regards
This problem requires specific object detection whose feature may vary a lot in natural scenes because of different view point, intensity, So you can try using SIFT, SURF for key point matching and object recognition. If the image features do not vary a lot you can achieve this feat with simple temple matching using opencv.js(JavaScript port of OpenCV library).
Also if the object of interest contains certain fixed color, you can filter the object using a predefined color range in HSV color model image as explained here
More robust solution: If you have good data-set of your object of interest, you can build a deep learning model for object detection using tensorflow and use it in JavaScript using Tensorflow.js, though i have not tried this approach.

Tile-based map solution supporting vector layers

I need to display a map of the US and, above that, a layer of states, another of counties and another of places (as per defined by US Census). Also, depending on some criteria, I need to dynamically toggle one layer or another, and to colorize some parts of the layer (e.g. fill some counties in red, others in green, etc). The map itself can be plain simple, I don't need roads or anything that detailed.
My first attempt was done with d3 based on this example, but I'd really like to switch to a tiling-based solution as it seems more responsive, lightweight, smoother and better supported for mobile devices.
I've been looking on the web for a solution (commercial and non-commercial, as a service or locally implementable) but I haven't found one to fulfill all my needs. For example, I've found MapBox which even has a very nice editor, but you can't fine-control the layers you define. I can hide/show a layer, but I can't colorize just a part of it. Google Maps was of course my first option but I didn't find a way to do as above.
Do you know if is there any solution out there that I could use?
I would have a look at the products supplied by boundless. They enable you to use a wide range of technologies and provide the final product in a number of ways. They use Geoserver as a tiling server into which you can output tiles or features depending on what your needs for that layer is.
You can connect to it using ESRI, Quantum GIS or use the included web based map. They are open source so there is a community version that can be used for free or a commercial version that is basically the same but comes with enterprise support.
You can find them here.

Suitable tool for simple interactive web application

I want to create not complex interactive web application. It has some pinboard and user can create many simple objects on this pinboard (e.g. many small circles). After this user can:
move these objects
delete some of them or create new ones
make multiple selection and move/rotate elements of selected group
place members of the selected group in some special order (grid, line, circle, etc)
Zoom in/out pinboard
I think that I can use Flash/Flex or JavaScript/SVG/VML for this purpose. Disadvantage of Flash is that user must have plugin. Minus of JS/SVG/VML is that there aren't such powerfull developing tools as in Flash case, but if we use some library (like http://raphaeljs.com/) application won't require flash plug-in.
I'm finding right tool for this aim. So give me some recommendations, please. Thanks in advance.
I believe that you can achieve your goals without Flash using HTML(5), JavaScript and not the least the Canvas element present in HTML5.
Bottomline is, unless you today require your application to animate a lot of objects with framerates approaching three digits, the above should suffice fine and will also pair you with a prospective Web development platform. I am often sceptical of the new stuff, but HTML5 and Canvas are fairly standardized, patent-free and are being actively adopted.
The only benefit of going with Flash that I can think of is being backed by a rich API that does 2D as well as 3D, and the fact that you can later port your ActionScript code to say, JavaScript when you finally decide to go with HTML+JavaScript instead. Aside from having to perhaps rewrite part of your drawing stack, your ActionScript code will require minimal (syntactic mostly) changes.
I would still advise you to go with my first suggestion, unless you need live (camera) video publishing, 3D, sound editing and few features not available easily outside Flash Player. Which I don't think you will need.
You might want to have a look at existing similar projects, such as SVG Edit (MIT license).

What language to use to create maps dynamically

I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks
Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.
If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.

Categories