I am currently working on google map and new to it..
I want to know is it possible to divide the map into certain tiles with definite height and width and to color them.. If yes then somebody can just explain how to do it as i am facing difficulties.
I think what you are referring to is known as overlays in the Google Maps API. Do you want to achieve something like this? (click to show overlay)
The polygons section in the Google Maps API documentation would be the place to go to learn more.
If there is a limited area (geographically) that you would like to color based on map tiles, then you could create a custom tile layer overlay for that area (with each tile colored appropriately).
You can read the documentation for Tile Layer Overlays, but the gist is that you create a GTileLayer object, then set a property on that object with a function, getTileUrl, that is called when Google maps need to insert a tile in Google Maps.
In your getTileUrl function, you can return your own version of the tile (which you can draw with a colored tint based on the origional tile):
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/origional_tile_with_colored_tint.png";
};
Once you have a a GTileLayer object, you instantiate a GTileLayerOverlay (passing in your GTileLayer) and add it to the GMap2 object (with the addOverlay method).
You can find an example of this here.
Related
I set up a PostGIS database that I added in GeoServer via a parameterized SQL view. I used Leaflet to display this layer via wms.
It worked fine until I add GeoWebCache using the url "/geoserver/gwc/service/wms" instead of "/geoserver/wms". I can still see my polygons when I'm at the minimal zoom. But then when I zoom I see only a red polygon and a half of a green polygon and if I zoom again I see only the red polygon. You can see these 3 states on the images below:
I guess this is a problem of tiling: I get the minimal tiles and also some tiles around the red polygon for further zooms but for some reason it seems that the other tiles are not sent.
Here is the code I use to get my wms layer with leaflet:
geoJSONlayer = L.tileLayer.wms("/geoserver/gwc/service/wms", {
layers: 'cartowiki:choix',
format: 'image/png',
transparent: true,
viewparams: 'year:'+(annee+3000)
}).addTo(map);
geoJSONlayer.addTo(map);
Do you have an idea of the problem here ?
Thanks in advance,
The bounding box was the problem indeed. In Geoserver, I had to modify the properties of the layer in 2 places :
I clicked 'Compute from SRS bounds' and then 'Compute from native bounds' in the Bounding Boxes part of the Data section
I erased and created again the available gridsets in the Tile Caching section so that the grid subset bounds would update with the new Bounding Boxes
I hope it can help someone in the future!
I am trying to find a how to get the Google maps marker (it's an arrow) twisting. I know the direction in which the marker has to twist (an angle from 0 to 360°), but can't find anything about it on the internet.
Does anyone know how I need to do it? I know Google maps does it on phones like this:
When you set the icon on the map, you can use the rotation property on the google.maps.Symbol object. See here:
https://developers.google.com/maps/documentation/javascript/reference#Symbol
Furthermore, you can use google.maps.spherical.computeHeading() if you need to determine the value for the rotation property. See here:
https://developers.google.com/maps/documentation/javascript/reference#spherical
Example:
var heading = google.maps.geometry.spherical.computeHeading(fromLatLng, toLatLng);
marker.setIcon({
scale: 6,
rotation: heading
});
I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!
The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).
currently we are using HERE Javascript Api 2.5.3 (https://js.api.here.com/se/2.5.3/jsl.js?with=all) and created a markersContainer which contains a few markers.
After all markers are successfully added to the markersContainer i used map.zoomTo(markersContainer.getBoundingBox(), false, "default"); to zoom to the markers bounds.
As we are using different map overlays the zoomLevel are not perfect to show all markers (they are behind an overlay at the top of the map).
So we want to add some offset to the bounding box, such as the boundingBox is starting on the top of the map plus an offset of 180px.
So: Is there any property to use zoomTo(boundingBox, false, "default") within an X/Y offset to the boundingBox like:
Pseudo code:
markersContainer.getBoundingBox(topleftOffset, bottomRightOffset)
Thanks in advance.
Got it ... Using the map.setPadding()-Method.
I am new to AngularJS and I am looking to add some plotting functionality to my web app.
I have a map of the world (a png file) and X/Y coordinates that I want to overlay on top of the map image. For example, my data might look like:
[
{
'location_x':'123',
'location_y':'224',
'date':'20100505',
'text':'I loved this place!'
},
{
'location_x':'222',
'location_y':'333',
'date':'20110606',
'text':'Never again!'
}
]
I would like the date values to appear in the area designated by the x/y coordinates, and the text to appear as a tooltip for the date.
I do not need the application to expose the capability to edit the x/y coordinates, I only need to display the values that my data source gives me. I need to use a custom image as the map. What are my options for getting this done?
You could use LeafletJS .
Another option is to use the Google Static Maps API.