Pavement heat map - javascript

I'm currently working on a student project and I need help. I'm using Python, VueJS and OpenStreetMap.
The task is to use free tools or services to get a layer of roads and draw a heat map on them. The heat map I need is what you see when you build a route in a navigator, which shows traffic congestion in green, yellow and red colors.
Just about what I need. So that the heat map of the traffic only covers the road sections, and does not go beyond them.
If any way, even with paid services, you can't draw a road heatmap layer like the one in the picture above, here's another option that will work for me.
The last picture is something I already know how to draw, but it doesn't work for me because the heat map goes too far out of the way. I need the heat map to stay only within the boundaries of the road. I also need it to be uninterrupted, meaning that the entire road is green and only in the places I want it to be in other colors.
If you're interested, there's a device that is installed in public transport that detects, recognizes potholes on the road in real time. Then all the collected telemetry is uploaded to the server, where I already display a heat map with potholes on the roads on the web map.
So if anyone knows how to draw the heat map I need, I would be very grateful.

Related

how to highlight a state in google maps on click any area in the state of a country

I am willing to highlight a state in the Google maps when user click on any area in the particular state. Supprose if I click on any area in the Washington sate. Then the Washington should be highlighted. Can you help me if any api or js is available to do like that.
There is no automatic API for this. You are going to have to draw a polygon either dynamically when the user clicks, or pre-draw all the U.S. State polygons in advance and hidden, then dynamically make the proper one visible when the user clicks.
As for making polygons in the shape of at least U.S. states, several persons have posted pre-defined polygon lists. One is here in StackOverflow: Geographical boundaries of states/provinces -> Google Maps Polygon
However, if you are looking at world-wide regions, states, and provinces, I doubt you will find pre-defined lists of them all. You may well have to create your own polygons by manually drawing on a Google Map or Google Earth, then export the polygon's lat/lng waypoints.
recently I am creating some relative, the tests I made was based on OpenStreetMap Nominatim (https://wiki.openstreetmap.org/wiki/Nominatim), is something like:
Click on map get Lat, Lng
Search by reverse Geocode, get state (or city)
Use Nominatim API to get a polygon_text (I use the geo WKT format), parse it
Draw the polygon or polygons (if multiplygon) with Google Maps API
Hope it could make some ideas come.

level picker in JavaScript API v3 for indoor maps

I'm doing an offline mapping of my school building. One of the buildings have 9 floors. Just started to test and put two ground Overlays that way:
layer1 = new google.maps.GroundOverlay('images/2floor.svg', layerBounds);
layer2 = new google.maps.GroundOverlay('images/1floor.svg', layerBounds);
In other words, I've placed the two layers in the same spot.
I believed that when I increase zoom in the area, the floor picker would be shown, but that doesn't happen.
I appreciate any help with this.
The V3 version of javascript GroundOverlay does not support what you want to do. Google Maps will just lay the second GroundOverlay over the first, and the first will never show.
With the upcoming demise of Google Maps Engine, and because we had a need to show different imagery at different zoom levels plus non-rectangular satellite imagery, we wrote a GroundOverlayEX javascript class for Google Maps API V3. It does everything the Google Earth version of GroundOverlay does (including image rotation, non-rectangular images, drawing order, support for switching images at different zoom levels, etc).
The class is up on GitHub at https://github.com/azmikemm/GroundOverlayEX
There is complete API documentation there too (documentation.txt). This is a recent coding effort.
If you want to see a working example of the class in action, you can visit
https://sites.google.com/site/issearthatnight/. That Google Map is showing 100s of GroundOverlays drapped over North America and at the default zoom is showing low resolution images from NASA. If you zoom in, all the GroundOverlayEX objects auto-switch to high resolution images from NASA.
The zoom-switching is completely configurable in the class, and can have as many different per-zoom-level images as you want.
If you talk about the Indoor level picker of Maps, you need a processed floor plan by google.
To do this, go to (your plan will be visible by all on GMaps) :
https://www.google.com/maps/about/partners/indoormaps/
A simple GroundOverlay is just a layer, the only possibility to do that is to create buttons for changing floor...
Thanks, I'm using Leaflet with the leaflet-indoor library (https://github.com/cbaines/leaflet-indoor) to do that.
This is an example of what I want to do: http://cbaines.net/projects/osm/leaflet-indoor/examples/
Still accepting help or advice on this subject...

Javascript plugin to draw markers, lines, and shapes on a latitude/longitude grid for offline use?

I am attempting to make a simple PhoneGap app that will allow a user to input lat/long points and bearings and calculate their estimated intersection, along with a measure of error. I would like to display the lines, intersection, and an error elipsoid on a map or at least a grid of latitude and longitude lines, so the user can visualize the accuracy of the point. The tricky part is that this will be used for wildlife tracking in areas where the user may not have cell service. Is there some sort of Javascript plugin that will make a lat/long grid available for me to draw georeferenced lines and shapes on? I would love to use something like the Google Maps API, but that clearly won't work for offline use. I've Googled quite a bit, but I'm not sure where to start with this or if it's even feasible at all.
This program is similar to what I'm trying to achieve: http://www.locateiii.com/
Any ideas are greatly appreciated.
I'd use d3.js and http://code.google.com/p/gmapcatcher/ something like this where you can keep the google maps offline. If that's not feasible you can always us D3 with a svg of the map.
I ended up using OpenLayers with OpenStreetMap tiles prepared by Maperitive. Simple and works well with PhoneGap.

Creating shaded areas for distances in the Google Maps API

I need to show my clients what 'zone' they live in (how much they will pay depending on how far away they are from my business). I want to use Google Maps to give them a view of what roads/towns/cities/etc. are in what zone. I was going to make some kind of definable barrier of sorts that would emanate from the center point.
I would have it so one barrier line showed where it was x miles away from the center point, another barrier would define areas y miles away, another defining areas z miles away, and so on and so forth.
I've never used the Google API and I'm only slightly good at Javascript... What is the best path to take here to learning how to do this... or... even better... how would I do this?
Thanks for helping!
Cheers!
You can create polygons on the map and set the fill shading opacity such that it is slightly transparent. When you layer concentric circles over one another, you'll see the shading change slightly.
I wrote a series of posts on how to use the maps API for Google, Bing, and MapQuest that you might find useful.
http://www.onesadjam.com/search/label/mapping
Look at the documentation on google maps javascript api V3. I sense that you will be creating polygons - specifically look at how to do that. In the API, you can create a circle polygon, with options such as the center and radius, making your job very easy.

How to show Google Maps tile overlays of Google Earth's Old-world maps (or a blank / physical world map)?

I am trying to build a Google Maps-driven web application that can display a map of the whole world in one or all of the following configurations:
A continent-outline map, only differentiating between land and water (like this, but without the country borders/names, and without showing any additional detail as you zoom in)
A physical geography map of the world, containing absolutely no road, city, or political borders (so the default satellite map is out - if I can't get anything else working, I'm considering just restricting the zoom-level such that you can't get in close enough to see modern features)
The same kind of old-world maps shown here and here for Google Earth.
A similar effect to what I'm after can be achieved with the old maps from the Rumsey Collection (q.v.), which are excellent but rather bandwidth-intensive and slow down the GMaps performance significantly. Simpler, less detailed images would better suit my purposes.
Is there an efficient way to load those world-spanning KMZ graphical files from bullet 3 as tilesets?
How about the physical or silhouette-based map? If necessary, one could follow the GMaps guideline for carving out .png files to represent each tile if there exists a freely available starting map.
You can also use open-source MapTiler application - http://www.maptiler.org/ or the command line utility gdal2tiles.
Here is a tutorial on building custom tiled maps:
http://webtide.wordpress.com/2008/08/27/custom-google-maps/
This appears to be a service for creating custom tiled maps:
http://www.maplib.net/
Good luck!

Categories