Overlaying Google-Defined Localities into Google Maps - javascript

I am a Massive n00b with this so please forgive my terrible ignorance.
I'm trying to work out how to do what may sound simple in placing an overlay over some Australian suburbs on a Google Map on a website using its API.
I've been reading about overlays and how you can define polygons with coordinates as per http://code.google.com/apis/maps/documentation/javascript/overlays.html#PolygonOptions - and its example.
I want to place an overlay on the suburbs of Black Rock, Beaumaris, Cheltenham, Mentone, Parkdale and Mordialloc in Victoria, Australia - so obviously I can work out the coordinates of that area and define it in the code. But this process would involve some work and time, probably not be specific and require many coordinates. What I was wondering is if anyone knows if/how it might be possible to use the MapTypeStyleFeatureType administrative.locality object's of Google Maps API - http://code.google.com/apis/maps/documentation/javascript/reference.html#MapTypeStyleFeatureType - which may already have this area defined with those suburb names - so I can get the overlay to cover the area of those suburbs as Google defines it? (for example, put those suburb names into the code and the overlay occur on them automatically?) (or something!)
Sorry for what this is probably a really amateur explanation and question but I thought I might be able to do this myself and it might be possible with the help of a few nice, smart people :)
Many Thanks,
Tom W

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

Checking if object in Open Street Maps is a building

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).

Google / Bing Maps Show All Cities

Trying to find a way without zooming in real close to tell Google or Bing maps to show all cities. Bing does a good job for the most part but still when you zoom in it shows a whole different set of cities.
I have a large monitor this map is going to be sitting on and really need it to show more than just the cities it shows on for example zoom level 8 or 9 on Google. Right now I load in roughly 2900 different locations and mark them on the map so I am trying to do it via the API no just going to maps.google.com
Has anyone come up against this issue and found a fix? Did some searching here as well on Google and maybe looking it up wrong but haven't found anyone looking for something like this.
Hi you can do that by using the Image Map Type API by implementing the mapType interface. Please refer to this link and implement the code in the way given in the example, replacing details with your specifications.
Hope this will help!!
I couldnt find either enough information to get "mapType" to work how I was wanting or it just doesnt do it. The goal was to be at lets say a zoom level of 8 and see every city in the US. I couldnt get any of the suggestions to do that.
Here is what I found that allowed me to do it my self though:
http://google-maps-utility-library-v3.googlecode.com/
Basically I put in a transparent marker so it didnt show up then put info boxes with the names. This actually worked really well for me because I can zoom out 100% and still see all the names. Although at that level they would be overlapping being able to zoom in and out a few ticks and still see everything is great.

how to take input from a user on a google map of a boundary he/she draws

I am developing a website and I am a very beginner to php.
this is my google map.
http://ceylonembedded.com/map2.php
I want a user to be able to draw a boundary when he accesses my site froma mobile or from a browser to be able to generate an alert by the system when something crosses the boundry.
Can someone please tell me what the better way to do this?
I understand I need to know good Google map API.
other than that do I have to lean JavaScript?
Or do I learn Jason? or any other technique?
A series of guidance would be so much appreciated.
One possible way would be to make the whole website a canvas in html5, and every frame, import the image from a offscreen google map. Then, you could draw whatever you'd want on your canvas using javascript; however, I cannot guide you through the process, it's just a hypothetical solution.

How can I access, then animate an existing leaflet map polyline using Javascript?

Can anyone suggest how I can access then animate the red polyline here using javascript:
http://gymloop.lukem.co.uk (login: User2/pass2, then select 'Challenges')
I want to animate the polyline from the first marker to the end of the red line (think Indiana jones but without the map moving and NOT using google maps). It needs to be dynamic as different users will have travelled different distances.
I need thew solution to work in FF, IE7+ & Chrome
I am using cloudmade's leaflet maps and am keen to avoid using google maps.
There is further information in my related question at gis.stackexchange
I've checked out your code and it seems you're using the leaflet API to draw the lines. Because of that, I've decided to write a somewhat generic function that animated those kinds of lines. (By the way, I'm confused why that API uses path tags instead of line tags, but I've rolled with it.)
Here's the code: http://jsfiddle.net/mihaibirsan/Wzvre/
I'd like to polish it a bit more, but I wanted to put a foot in the door for that bounty. :D (I'll get back to polishing and post an update in a few hours, once I've done some other work.)
I highly recommend jquery_svg plugin. I've been using it and there are plenty of features, including animation, text on path, user interaction.

Categories