I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.
Related
What I'm trying to achieve is to map icons, labels, polygons to raster images.
And to have an ability to zoom.
I.e. to map furniture to offices / buildings.
Also it's needed to be said that user should work with it through API (through web site interface).
Recently I've spot Mapbox.
While Mapbox is awesome and seems to be a good fit to achieve my goal, I find it hard to find docs for implementing it.
What I've found so far is:
I can use mapbox-gl-draw to draw polygons
I can upload datasets. Which consist of position, data. With that I can upload icons, labels and probably polygons.
The missing puzzle is: How I can work with raster images?
and
Should I position (edit) icons, labels on my own and later save to dataset? Or there already exist a functionality drag-drop out-of-box?
One idea is to use Mapbox with transparent background and to zoom raster image separately. Kind of synchronizing it with the map.
Any help would be appreciated
I believe this example from the mapboxGL examples shows what you're looking for: https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/.
Note that the radar layer, while it looks like a layer constructed in data, is simply a gif added as an image layer, with a bounding box of of four lngLat coordinates. https://www.mapbox.com/mapbox-gl-js/assets/radar.gif
I'm trying to develop a very simple sketch program that can draw the dimensions of buildings. For example, if I want to draw a 24'x24' house, it would simply be a square with each side representing 24'. I've read that SVG/Javascript may be ideal, but I'm looking for some specific guidance.
Here is a link to a 30 second video showing exactly what I need: https://vid.me/96Mz
I'm able to draw those shapes by clicking in one spot and then moving the mouse to another location to draw a wall, then click again to produce a third corner, and then a final time to close the shape. I'd need the area to be calculated too.Preferably the dimensions of each side would be able to be shown as labels.
Here's an example of an image I'd like to be possible:
Click Here
Can you think of anything to help me build a simple version? Any feedback is huge, thanks a lot.
I use three canvas' over each other to draw a map for a robot application. The map gets constantly updated (on pixel level) based on the robots sensor results.
I now want a part of this map to be displayed in a zoomed way at a diffent place on the page.
Aim is to have a zoomed view of the robots actual position drawn above the complete map.
What is the best/easiest approach for this?
Thanks
Robert
This is the setting:
I have a car moving inside a specific area on google maps. This area is determined by a
Polygon. The car is tracked via GPS and you can see it on the map moving.
I want to know which parts of that polygon area the car covered on its route before leaving the polygon, and show the covered in green color and the uncovered in red color (these will be polygons also, right?).
I don't asking for any code at all, only the idea of how an algorithm would work for that purposes.
If someone can throw me some pointers, I'll apreciate it.
Your better off coloring the polygon Red initially and overlaying a green polygon based on historical locations. The algorithm would end up creating a list of all max/min lats with unique lons, and all min/max lons with unique lats. Let me know if this isn't enough information for you and I can elaborate further.
I have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.
I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.