google maps api how to add circles around cities with url - javascript

I was reading this link but it is not the same
http://productforums.google.com/forum/#!category-topic/maps/base-map-data/M775Ry3-vNM
How can in google map makes circles and urls around cities?

See the following link
http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html
Use new google.maps.Circle() constructor. You should set the centre and specify the radius of the circle. Hollow effect can be created using fillOpacity(0.0);
There is also a rectangle constructor new google.maps.Rectangle(). See https://developers.google.com/maps/documentation/javascript/reference#Rectangle

Use new google.maps.Circle() with a combination of listeners like mouseover and click.
There are display options like opacity and color.
https://developers.google.com/maps/documentation/javascript/reference#Circle
Your question is a bit too broad. If you have a more specific problem please edit it.

Related

Change selected layer style in Openlayers

I need to change the style so that when I select a polygon from my layer it doesn't have the blue line as it is in this image. Does anyone know where I make this change with Openlayers?
I assume you are using the Select interaction - it has a style parameter as described in the docs:
https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-Select.html
There is also an example for this:
https://openlayers.org/en/latest/examples/select-features.html

How to draw mxGraph endarrow as double ended

Used the XML structure to draw the graph using JavaScript library, I want to draw an edge having a double ended arrow, i.e, endArrow=open; two times.
I used in style as style="endArrow=open;", but I'm getting the endarrow only once, I need to two times. something like this --->>
You need to define a custom marker, register it, then use it for the start/endArrow style(s) as needed.
The markers example demonstrates how this is done.
Add and define the marker using mxMarker.addMarker() and the canvas API to define the graphics operations using the end point of the line (pe) and vector normal the direction of the marker (nx, ny).

How to make area of image clickable

This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.
I have this map:
As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.
But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.
I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.
I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.
I hope that one of you have a suggestion that I've overlooked.
Give a try to these -
http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS
You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.
Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
Make an image for each clickeable zone, like this:
Register to the click event of the img element from the page, this way:
var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};
$(".post-text img").click(function(e) {
var area = getAreaFromXY(e.offsetX, e.offsetY);
});

Setting click priority on google maps polygon array

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

How to add square tiles to leaflet map with hovering effect?

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.
This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},

Categories

Resources