Develop Reference

Add concentric circles to a map at specific distances around a marker using Leaflet and GeoJSON

This question (leaflet concentric circles (angular 2)) is similar, but since its not quite the same and no-one has answered it I thought I would start over.
My Leaflet map is populated by markers created in PHP from a MySql database. Here is a link if you want to see it; https://net-control.us/map1Test.php.
I would like to be able to right click on any given marker and have a series of concentric circles drawn around that marker at various distances in miles (example: 2, 5, 10, 15).
I think I need to do this with GeoJSON but any method that does what I need is OK with me. I just have not figured out how to first of all draw the circles at the distances I need and secondly how to allow a marker to be right clicked to display them.
I can't find any examples, and the only similar question has not been answered. Can someone show me how to do this? I use OSM maps.
The code (PHP) to make each marker looks like this;
$markers .= " var $callsign = new L.Marker(new L.LatLng($row[koords]),{ icon: new L.{$row[iconColor]}({number: '$rowno' }), title: \"marker_$rowno\"}).addTo(fg).bindPopup(\"$rowno<br>$row[mrkrfill]\").openPopup(); $($callsign._icon).addClass(\"$row[classColor]\"); markers.push($callsign); \n";

You don't share the code which creates the markers, so this is necessarily theoretical...
When creating the marker, add a contextmenu hook, which calls a function that uses L.circle to add circles to the map.
EDIT: So I peeked at the source of your site, your Javascript snippet for each marker should end up like this:
var WA0TJT = new L.Marker(new L.LatLng(39.202911,-94.602887),{
icon: new L.NumberedDivIcon({number: '1' }),
title:
"marker_1"}).addTo(fg).bindPopup("1<br><b>#0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup().on("contextmenu", drawCircles);
$(WA0TJT._icon).addClass("bluemrkr");
markers.push(WA0TJT);
with a new function like this
function drawCircles(event e) {
L.circle(e.target.getLatLng(), {radius: <radius in metres>}).addTo(map);
// ... any more circles you need ...
}

var i;
var r = 1609.34; // in meters = 1 mile, 4,828.03 meters in 3 miles
var circleOptions = {
color: 'blue',
fillColor: '#69e',
fillOpacity: 0
}
for (i=0 ; i < 3; i++ ) {
r = (r * i) + r;
alert(lat+", "+lng);
var circle = L.circle([lat, lng], r, circleOptions);
circle.addTo(map);
r = 1609.34; // reset r so r calculation above works for each 1 mile step
}

How to link polygons from different file to google maps api v3

I'm using google maps api v3 for my project and i'm using a set of polygon coordinates to highlight a region. But i'm highlighting 15 regions and each regions have more than 100 polygon coordinates. Is there any way i can create another file where i can put all the coordinates with their corresponding region's name and i can use those regions name in my html page.
Here is my code
var kerala = new google.maps.Polygon({
map: map,
paths: [
new google.maps.LatLng(12.758232,74.86084),
new google.maps.LatLng(12.736801,75.014648),
new google.maps.LatLng(12.329269,75.432129),
new google.maps.LatLng(12.093039,75.794678),
new google.maps.LatLng(11.942601,75.959473),
/* n number of coordinates */
],
strokeColor: '#873600',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#873600',
fillOpacity: 0.5
});
But i want something like this
var kerala = new google.maps.Polygon({
map: map,
paths: /* here i should give the name of a region, which will be defined with coordinates in another file */
});
Some one please help me with this , i don't even know how to define that polygon coordinate file, and which extension should that file be defined with.

make array of state name with latlng object and use as a path
example:
var maharashtraArray = [];
maharashtraArray.push(new google.maps.LatLng("latitude","longitude"))
then use this array as polygon path
var kerala = new google.maps.Polygon({
map: map,
paths: maharashtraArray
});

Google Maps API Polyline creation failing with "Uncaught TypeError: number is not a function"

I'm working a django project using the google maps JS api.
Basically what's going on here is that I'm creating a map centered at a point (works perfectly), drawing a bunch of points specified by the journey variable (value is substituted in by django template),
and then trying to draw a polyine between these points. (Fails to produce a polyline with a "Uncaught TypeError: number is not a function" at the JS console.)
The traceback at the JS console is pretty indecipherable to me, particularly due to all the .js files being minned.
When I log the path attribute of the polyline, and the coordinate I'm adding (as seen below), everything seems to work. I know the coord is formatted correctly, because I think Marker and Polyline should take the same datatype (LatLng) for their locations, and the Markers work fine. Anyone have any idea what's happening?
var mapOptions = {
center: { lat: 37.23112,
lng: -122.29398
},
zoom: 15
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Make the line that will trace the guys route:
var polyOptions = {
strokeColor: '#000000',
srokeOpacity: 1.0,
strokeWeight: 3
};
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Make an array of everywhere the lilguys has been. Passed into this django template as {"lat": 12, "lng": 8} objects.
var journey = [{"lat": 33.2389, "lng":-123.9349}, {"lat":32.928392, "lng":-122.29289}, {"lat":33.928982, "lng":-120.298392}];
var journey_markers = [];
// Draw all the placemarks
for (var i = 0; i < journey.length; i++) {
var coord = journey[i];
journey_markers.push(new google.maps.Marker({position: coord, map:map}));
var path = poly.getPath();
console.log(coord);
console.log(path);
path.push(coord);
}
Thank you!
EDIT:
I substituted the template variables in for what they evaluate to. This was checked by looking at the HTML source code in the browser, and confirmed to not be the source of the bug.

Figured out the answer. It seems to be that unlike Markers, the Polyine path requires google.maps.LatLng() objects rather than latlng literals.
The following fixes the issue:
...
// Draw all the placemarks
for (var i = 0; i < journey.length; i++) {
var coord = new google.maps.LatLng(journey[i].lat, journey[i].lng);
...

Unable to reuse polyOptions for new polygon

I'm working with the Google Maps v3 API, placing some polygons on the map. I create a 'polyOptions' object which is used when creating the polygon.
This only works once. For all other polygons, I have to create another identical 'polyOptions' object. Which is fine, but a bit repetitive, and this webpage is big enough already without repeating myself.
Have I misunderstood the nature of this JS object?
//Create array for polygons
var polygons = [];
//first polygon
var myCoordinates = [new google.maps.LatLng(55.81362907119961, -2.054443359375) //long list of coordinates
var polyOptions = {
path: myCoordinates,
strokeWeight: 1,
fillColor: "white",
fillOpacity: 0.6
}
var poly1= new google.maps.Polygon(polyOptions);
poly1.setMap(map);
polygons.push(poly1);
//second polygon
var myCoordinates = [new google.maps.LatLng(54.94607621987403, -3.16131591796875) // long list of coordinates
var poly2 = new google.maps.Polygon(polyOptions); // doesn't work
poly2.setMap(map);
polygons.push(poly2);

You must update the path property of your polyOptions at every step. At the moment your second polygon is drawn on the first with same coordinates.
// second polygon
// your var myCoordinates is already defined above, now use it by its name
myCoordinates = [new google.maps.LatLng(54.94607621987403, -3.16131591796875) // long list of coordinates
polyOptions.path = myCoordinates; // here you set path to the new value
var poly2 = new google.maps.Polygon(polyOptions); // should work
poly2.setMap(map);
polygons.push(poly2);

google maps middle of a polyline (centroid?)

I have a list of polylines, just like google maps does when I click on the polyline I want an infowindow to show up just where I clicked, and it works just fine with this function
function mapsInfoWindow(polyline, content) {
google.maps.event.addListener(polyline, 'click', function(event) {
infowindow.content = content;
infowindow.position = event.latLng;
infowindow.open(map);
});
}
the problem comes when I click on the list(using the same function for that), event obviously doesn't have the latLng, but I'd like infowindow to show up in the middle of the polyline anyway, just like it does when you click on the list in the google maps link I mentioned before.
Tried LatLngBounds(); but that gives the actuall center of the area the polylines create, not the middle I need.
Any idea how to do it?

So this is the(bit hacky) solution.
Use http://www.geocodezip.com/scripts/v3_epoly.js library, then count the total length of you polyline(various ways), divide it in half and call epoly's .GetPointsAtDistance() function upon it.
This should return LatLng point, but it acts a bit weird sometimes, returning two points or even turning that point somehow "broken". So the most secure thing you can do is probably this:
var pointInHalf = polyline.GetPointsAtDistance(polylineLength);
var pointCoordinate = new google.maps.LatLng(pointInHalf[0].lat(), pointInHalf[0].lng());
Well, better than nothing.

From http://www.geocodezip.com/v3_polyline_example_geodesic_proj.html
Without extensions and assuming the polyline is a straight line.
It is possible to convert the lat/lng coordinates to point plane (x,y) postions and calculate the average between the two. This will give you a central pixel position. You can then convert this position back to a latlng for map plotting.
var startLatLng = startMarker.getPosition();
var endLatLng = endMarker.getPosition();
var startPoint = projection.fromLatLngToPoint(startLatLng);
var endPoint = projection.fromLatLngToPoint(endLatLng);
// Average
var midPoint = new google.maps.Point(
(startPoint.x + endPoint.x) / 2,
(startPoint.y + endPoint.y) / 2);
// Unproject
var midLatLng = projection.fromPointToLatLng(midPoint);
var midMarker = createMarker(midLatLng, "text");
More information on changing the projection http://code.google.com/apis/maps/documentation/javascript/reference.html#Projection

So firstly you need to use the geometry library which calculates distances. Add libraries=geometry to your JS call, e.g.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Assuming you know the start point and end point for your polyline, you should be able to do this:
var inBetween = google.maps.geometry.spherical.interpolate(startLatlng, endLatlng, 0.5);
infowindow.position = inBetween;
I guess if you don't already know the start and end points, you could work it out from polyline.getPath().

to get the coordinates of your polyline you should do:
var widePath = new google.maps.Polyline({
path: waypointsCoordinates,
strokeColor: '#3366FF',
strokeOpacity: 0.0,
editable: true,
draggable: true,
strokeWeight: 3
});
and do:
var latLng [];
latLng = widePath.getPath().getArray();

Might be a bit old as well, but why not add the infobox on the click?
infowindow.setPosition(event.latLng);
infowindow.open(this.getMap());
If it's a click that is.