google maps javascript api v3 - overlay behind the roads - google-maps-api-3

Is it possible to set overlays like polygons and circles behind the roads?
(I think this would be possible only if google sends each tile in two sets one with just background and one with just the roads with full transparency. I am not sure if google does that.
From the api, I could see only ZIndex, which is relative to other overlays. So, it seems it is pretty much not possible. Can somebody please confirm this for me?!

It is not possible - a map tile image contains both the road and terrain and all the other graphic elements of the map itself. There are separate layers for markers and polylines so in theory you could create your own polyline layer containing road polylines and draw under that but that would be too complex. If you would like to draw fully customizable maps check out OpenLayers or http://polymaps.org/ or http://www.cloudmade.com/

Related

Google maps with color/gradient overlay

On google maps, on the website, is there a way to make it so that all land area is of a gradient color, and no names, text etc shows? so just a gradient color map, with nothing else.
Or is it better to use an image for such a case? The thing is, i need to show pins at specific countries, so idk if its simpler to use an image, and set each pin position separately, or to somehow use google maps, if its possible to set it to gradient color?
any ideas are welcome
You can create your own style map, I suggest you check the documentation
https://developers.google.com/maps/documentation/javascript/styling or https://console.cloud.google.com/projectselector2/google/maps-apis/studio/styles
The second link takes you straight to the management console to create your map.

Select map section in Tableau

I have two geo-maps in Tableau, in different sheets. Both are created from different data and therefore don't show the exact same geo section of the maps. E.g. the displayed section of the first map is a bit larger than the section of the second map because the coordinates extend over a larger geographical area.
Is there a way in Tableau to manually synchronize both maps in the different sheets? I search for a way to tell Tableau to display a map section from coordinates X1/Y1 (left top corner) to X2/Y2 (right bottom corner) however i failed to find one.
One option is to use a static background image instead of a dynamically generated map background. This allows you exact control of the map, corner coordinates, and where to clip the axis boundaries. It can also be faster and more robust if your connection to your map server is slow or unreliable.
The main downsides are that zooming won't automatically switch to more detailed maps just scale the image and that you don't get the background layer choices under map options.
To give it a try, use the Background Images panel from the Map menu

how to draw filled polygon in Google Maps SDK for iOS

I would like draw a filled polygon on iPhone with Google map (Version 1.1.1, the last one).
Anyone knows how to do like that on ios :
(My code on Android)
mMap.addPolygon(new PolygonOptions()
.addAll(latLngList)
.fillColor(Color.BLUE)
.strokeColor(Color.RED)
.strokeWidth(3));
Regards,
PS : If you have many solutions, keep in mind that I have many Polygon to draw.
The SDK currently doesn't support filled polygons, however there is a feature request to add them here:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=5070
In the meantime, one option could be to draw your polygons into an image, and then add them as a ground overlay. This would be very limiting, but might work as a temporary workaround.
Another option is to add another view over the top of the map view and draw the polygons into it, and then update them whenever the map view moves. It isn't possible to perfectly synchronize another view with the map view, so your polygons will lag behind a bit as you pan/zoom around, but this might also be okay for you as a temporary workaround.
UPDATE
These are just some random ideas to try for the ground overlay approach, I'm not sure if they would work, but they might get you started:
I would suggest converting the lat/lon corners of the rectangle into MKMapPoint (using MKMapPointForCoordinate). These are equivalent to Google's coordinate system at zoom level 20.
You can then use the aspect ratio of the width/height of the rectangle in MKMapPoint coordinates to determine the aspect ratio of your ground overlay UIImage. Once you have the aspect ratio, you'll just need to experiment with actual sizes (ie guess a width, calculate the height from the aspect ratio) to find one which looks okay. The bigger it is, the finer the detail of your rectangle will be, but the more memory it will use, and probably the slower the performance will be. Also you might hit a hard limit at some size - I'm guessing the UIImage gets converted by the Google Maps SDK into a texture, and textures have a max size of 2048x2048 on iPhone 3GS+.
Then, use something similar to How to setRegion with google maps sdk for iOS? to calculate a zoom level and centre lat/lon. Instead of the map view width/height you would use your UIImage width/height, and you'd use the bounds of your rectangle instead of the bounds of the desired view. You also wouldn't need to calculate the scale from both the width and height (as the scale should be the same) - so just use one of them. Instead of creating a camera with the zoom level and centre lat/lon, set them on the GMSGroundOverlayOptions. Also set the ground overlay's anchor to the centre of the image (ie 0.5, 0.5).
The above describes how to add one GroundOverlay per rectangle. If you have lots of overlapping or nearby rectangles you could probably combine them into a single UIImage, but that would be a bit more complicated.

div with more than four corners

Is it possible to make divs with for example five or six corners?
I need this to make clickable zones on a map. If there is another way to achieve this I would be delighted.
No, you can't. A block in HTML is rectangular.
And even if you change its look using (expensive) css based tricks, the clickable zone will keep rectangular.
But there are several solutions for clickable zones :
simple computations with javascript from the event coordinates on click
the old image-map format
If you want to do it in javascript without image maps, you may be interested by ready algorithms to decide if a point is inside a polygon.
If the map is an image, use a polygon imagemap. There are several web apps that make it easy to create these (just Google "imagemap generator").
If you're using a mapping API like Google, they'll have documentation on creating clickable targets within the map (for example: Google Maps Docs).

How can I create an openlayers layer which includes the borders for the city?

First of all, I am a newbie in the field of GIS and openlayers so please bear with me. I am using an openstreetmap and would like to show the borders of the governorates on the map while adding a background for each governorate (see image below for an implemented example http://afghanistanelectiondata.org/open/maps/tiles/afghanistan-hillshade-english)
1-I wonder how the background and the borders are drawn? and how they exist no matter how much we zoom in and out?
2- From where are the images with the borders are brought, do we draw them or should we bring a map with the borders and put it over the map?
3- Anyone who has an example which wrap all the concepts all together (preferably with Drupal)?
The background and borders are pre-rendered tileset, generated and served with MapBox. You'll need to do some reading up on creating tiles and using them in OpenLayers.
You'll bring the map with the borders and put it over the map. But first, you'll need to create transparent tiles that have the governorates borders on them.
Here's a simple OpenLayers TileCache demo.

Resources