I have drawn a circle and and some polygons using addGeoJson. The problem is some of the polygons are drawn above the circle and some are below. How to fix this issue? I want to draw the circle on top of all the polygons. Here is my code
var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var mapOptions = {
zoom:9,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map1 = new google.maps.Map(mapcontainer, mapOptions);
var circleOptions = {
fillOpacity:0,
strokeColor: '#000000',
strokeWeight:2,
strokeOpacity:1,
center:map1.getCenter(),
radius:2000,
map:map1
};
circleRadius = new google.maps.Circle();
circleRadius.setOptions(circleOptions);
var listOfPolygons = loadPolygons();
//drawing polygon layers
var layer = new google.maps.Data();
var url = 'url/to/cords';
$.ajax({
url: url,
type: 'POST',
data: {'codes': listOfPolygons},
success:function(data) {
layer.addGeoJson(data);
layer.setMap(map1);
layer.setStyle({
strokeColor: '#6da57a',
strokeOpacity:.4,
strokeWeight:1,
fillColor: '#7bd490',
fillOpacity:.6
});
}
});
See the screenshot
Just set the zIndex-options and give the circle a higher zIndex than the data-features.
var circleOptions = {
fillOpacity:0,
strokeColor: '#000000',
strokeWeight:2,
strokeOpacity:1,
center:map1.getCenter(),
radius:2000,
map:map1,
zIndex:1//<----here
};
//........
layer.setStyle({
strokeColor: '#6da57a',
strokeOpacity:.4,
strokeWeight:1,
fillColor: '#7bd490',
fillOpacity:.6,
zIndex:0//<-----here
});
Related
I am trying to center and fit the boundaries of multiple geojson polygon features on my google.maps.Map.
See this non geojson fiddle recreating the effect i'm after.
Is there an easy Google Map API 3 function to do this for geojson data?
See my code below and fiddle here
var map;
window.initMap = function() {
var mapProp = {
center: new google.maps.LatLng(51.8948201,-0.7333298),
zoom: 17,
mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
map.data.loadGeoJson('https://api.myjson.com/bins/g0tzw');
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
var bounds = new google.maps.LatLngBounds();
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
}
I need expert pointers on cleanest and best way approach this.
See working demo of my code above in fiddle.
http://jsfiddle.net/joshmoto/fe2vworc/
I've included my geojson inline so you can see the polygons on the map.
Here is a quick example of how you can get your features bounds. This will just get each feature bounds, extend a LatLngBounds object and then fit the map with these bounds.
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: {
lat: 0,
lng: 0
}
});
var permits = {
type: "FeatureCollection",
id: "permits",
features: [{
type: "Feature",
properties: {
name: "Alpha Field"
},
geometry: {
type: "Polygon",
coordinates: [
[
[-0.72863, 51.895995],
[-0.730022, 51.896766],
[-0.730754, 51.896524],
[-0.731234, 51.896401],
[-0.731832, 51.896294],
[-0.732345, 51.896219],
[-0.732945, 51.896102],
[-0.732691, 51.895774],
[-0.732618, 51.895531],
[-0.732543, 51.895359],
[-0.73152, 51.894751],
[-0.731037, 51.894488],
[-0.730708, 51.894324],
[-0.72863, 51.895995]
]
]
}
},
{
type: "Feature",
properties: {
name: "Beta Field"
},
geometry: {
type: "Polygon",
coordinates: [
[
[-0.728004, 51.895658],
[-0.72863, 51.895995],
[-0.730708, 51.894324],
[-0.731217, 51.893784],
[-0.730992, 51.893709],
[-0.730793, 51.893567],
[-0.730734, 51.893435],
[-0.730761, 51.89333],
[-0.729696, 51.893244],
[-0.729391, 51.89314],
[-0.729249, 51.893586],
[-0.728991, 51.894152],
[-0.728525, 51.894983],
[-0.728004, 51.895658]
]
]
}
}
]
};
google.maps.event.addListenerOnce(map, 'idle', function() {
// Load GeoJSON.
map.data.addGeoJson(permits);
// Create empty bounds object
var bounds = new google.maps.LatLngBounds();
// Loop through features
map.data.forEach(function(feature) {
var geo = feature.getGeometry();
geo.forEachLatLng(function(LatLng) {
bounds.extend(LatLng);
});
});
map.fitBounds(bounds);
});
}
initialize();
#map-canvas {
height: 150px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
Props to #MrUpsidown for providing the working method to fitBounds.
I'm posting this answer to show my final solution based on #MrUpsidown answer using GeoJson data via loadGeoJson()
Here is my readable GeoJson here http://myjson.com/g0tzw
// initiate map
window.initMap = function() {
// permits json
var permits = 'https://api.myjson.com/bins/g0tzw';
// map properties
var mapProp = {
zoom: 17,
mapTypeId: 'satellite'
};
// google map object
var map = new google.maps.Map(document.getElementById("map"), mapProp);
// load GeoJSON.
map.data.loadGeoJson(permits, null, function () {
// create empty bounds object
var bounds = new google.maps.LatLngBounds();
// loop through features
map.data.forEach(function(feature) {
var geo = feature.getGeometry();
geo.forEachLatLng(function(LatLng) {
bounds.extend(LatLng);
});
});
// fit data to bounds
map.fitBounds(bounds);
});
// map data styles
map.data.setStyle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
}
I'm calling initMap via...
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?=$gmap_api?>&callback=initMap"></script>
See working demo here.
http://jsfiddle.net/joshmoto/eg3vj17m/
I draw polygon on my map but i get trouble because it draws a line on center if i formed a square or any shapes.I don't know what makes my polygon draw lines on center.
var map;
var count=0;
var polycolor = '#ED1B24';
var polyarray=[];
function initialize() {
var initial = new google.maps.LatLng(53.199246241276875, -105.76864242553711);
var mapOptions = {
zoom: 16,
center: initial,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
polyarray[count]= e.latLng;
addPolygon(polyarray);
count++;
});
}
function addPolygon(path){
var poly = new google.maps.Polygon({
path: path,
strokeColor: polycolor,
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
here is my jsfiddle
my demo
There is not a line down the center, you are drawing a new polygon for each click.
Make the polygon global, and update the path each time you add a point to it:
var poly = new google.maps.Polygon({
strokeColor: polycolor,
strokeOpacity: 1.0,
strokeWeight: 2
});
function addPolygon(path){
poly.setPath(path);
poly.setMap(map);
}
updated fiddle
I have a polyline on which i need to show each points coordinates, but the problem is that each info-window overlays other so i decided to draw only those info-windows which doesnt overlay others, but don't have any idea how to catch it...
Currently i have
window.onload = function() {
var bounds = new google.maps.LatLngBounds();
var coordinates = [];
map = new google.maps.Map(document.getElementById('map_canvas'), {mapTypeId: google.maps.MapTypeId.HYBRID});
for (i = 0, len = points.point.length; i < len; i++) {
var tmp_coor = new google.maps.LatLng(points.point[i].lat, points.point[i].lon);
coordinates.push(tmp_coor);
bounds.extend(tmp_coor);
var infowindow = new google.maps.InfoWindow({
content: points.point[i].lat + ', ' + points.point[i].lon,
maxWidth: 120
});
infowindow.setPosition(tmp_coor);
infowindow.open(map);
}
var polyline = new google.maps.Polyline({
path: coordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false
});
polyline.setMap(map);
map.fitBounds(bounds);
}
It creates
So maybe someone has any suggestions on this problem?
I inserted a polyline snap to road. It works fine.
Now, I'd like to insert another separated polyline snap to road, in the same map. And it doesn't work fine. It systematically joins the end point of the first polyline to the start point of the second polyline.
Thanks for your help.
Here is my code
function initialize() {
var pos = new google.maps.LatLng(-26.431228,-69.572755);
var myOptions = {
zoom: 5,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
ChileTrip1 = [
new google.maps.LatLng(-33.417723,-70.605018),
new google.maps.LatLng(-33.022446,-71.551688)
];
var traceChileTrip1 = new google.maps.Polyline({
path: ChileTrip1,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceChileTrip1.setPath(snap_path);
}
});
}
//SECOND POLYLINE SNAP TO ROAD
ChileTrip2 = [
new google.maps.LatLng(-29.959694,-71.30825),
new google.maps.LatLng(-32.778038,-71.181908)
];
var traceChileTrip2 = new google.maps.Polyline({
path: ChileTrip2,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path = snap_path.concat(result.routes[0].overview_path);
traceChileTrip2.setPath(snap_path);
}
});
}
};
window.onload = function() { initialize();};
The DirectionsService is asynchronous. Either clear the snap_path array inside the callback routine before using it or create 2 separate snap_path arrays:
function initialize() {
var pos = new google.maps.LatLng(-26.431228,-69.572755);
var myOptions = {
zoom: 5,
center: pos,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.setCenter(pos);
//FIRST POLYLINE SNAP TO ROAD
ChileTrip1 = [
new google.maps.LatLng(-33.417723,-70.605018),
new google.maps.LatLng(-33.022446,-71.551688)
];
var traceChileTrip1 = new google.maps.Polyline({
path: ChileTrip1,
strokeColor: "red",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path1=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path1 = snap_path1.concat(result.routes[0].overview_path);
traceChileTrip1.setPath(snap_path1);
} else alert("Directions request failed: "+status);
});
}
//SECOND POLYLINE SNAP TO ROAD
ChileTrip2 = [
new google.maps.LatLng(-29.959694,-71.30825),
new google.maps.LatLng(-32.778038,-71.181908)
];
var traceChileTrip2 = new google.maps.Polyline({
path: ChileTrip2,
strokeColor: "blue",
strokeOpacity: 1.0,
strokeWeight: 2
});
var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path2=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
if(status == google.maps.DirectionsStatus.OK) {
snap_path2 = snap_path2.concat(result.routes[0].overview_path);
traceChileTrip2.setPath(snap_path2);
} else alert("Directions request failed: "+status);
});
}
};
window.onload = function() { initialize();};
working example
Note that the overview_path is "simplified" and will not necessarily follow the road. If you need the exact route you need to process through all the legs.
I have the next code which show a path using a polyline. How can I remove it?
downloadUrl("myfile.asp", function(data) {
var xml = xmlParse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var path = [];
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
path.push(point);
}//finish loop
var polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}); //end download url
I have tried it using the next function but I m not able to make it work.
function removePath() {
polyline.setMap(null)
}
I think the problem is position of the variable "polyline".
var polyline = null;
downloadUrl("myfile.asp", function(data) {
...
polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}); //end download url
function removePath() {
polyline.setMap(null)
}