I want to build a lot of areas in google maps, and have each defined with a polygon.
If I do it one by one it works without a problem (inside the initialize func):
name = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//some event
//highlights polygon when mouseover
google.maps.event.addListener(name, 'mouseover', function () {
name.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
//then displaying it on the map:
name.setMap(map);
Now I want to have a function to just put in the coords to build the polygons, something like this. But just calling the function stops other polygons from being rendered, so I know there is a problem calling it:
iName = new drawPolygon(polyName, coords);
iName.setMap(map);
The function looks like this:
function drawPolygon(polyName, coords) {
polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
//fillColor: 'green',
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
}
any help as to why, how am I calling it wrong?
drawPolygon doesn't have a return statement. It returns null. nulldoesn't have a .setMap method.
Expanding on geocodezip's answer, just add a return statement to your function.
function drawPolygon(polyName, coords) {
polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
return polyName;
}
I'd also be inclined to in that case not bother passing polyName into the function as an argument. You don't bother showing us the code where you create the polyName variable prior to calling drawPolygon. But I assume you're not doing anything particularly clever with it that would require you to do so.
So refactored:
iName = new drawPolygon(coords);
iName.setMap(map);
function drawPolygon(coords) {
var polyName = new google.maps.Polygon({
paths: coords,
strokeColor: 'darkgreen',
strokeOpacity: 0.3,
strokeWeight: 1,
fillOpacity: 0.05
});
//highlights polygon when mouseover
google.maps.event.addListener(polyName, 'mouseover', function () {
polyName.setOptions({ fillColor: 'yellow', fillOpacity: 0.25 });
});
return polyName;
}
Related
This question already has an answer here:
How can I detect when an editable polygon is modified?
(1 answer)
Closed 4 years ago.
I want to get Lat and Long when I drag or edit polygon. How i can apply event listeners to this polygone so that whenever i edit or drag polygone it should show lat long on console of every point which i edit on polygon.
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: {lat: 51.476706, lng: 0},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// create an array of coordinates for a pentagonal polygon
var arrCoords = [
new google.maps.LatLng(51.474821, -0.001935),
new google.maps.LatLng(51.474647, 0.003966),
new google.maps.LatLng(51.477708, 0.004073),
new google.maps.LatLng(51.479753, 0.000468),
new google.maps.LatLng(51.477654, -0.002192)
];
var polygon = new google.maps.Polygon({
editable: true,
paths: arrCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
first make geodesic: true with draggable: true in polygon
When enabling dragging on a polygon or polyline, you should also
consider making the polygon or polyline geodesic, by setting its
geodesic property to true
Ref: https://developers.google.com/maps/documentation/javascript/shapes
insert_at & set_at gonna be called when polyline get edited.
var polygon = new google.maps.Polygon({
editable: true,
paths: arrCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
draggable: true,
geodesic: true
});
google.maps.event.addListener(polygon, 'dragend', function(evt){
console.log(evt.latLng.lat() ,'--', evt.latLng.lng() );
});
google.maps.event.addListener(polygon.getPath(), 'insert_at', function(index, obj) {
console.log('Vertex removed from inner path.');
console.log(obj.lat() ,'--', obj.lng() );
});
google.maps.event.addListener(polygon.getPath(), 'set_at', function(index, obj) {
console.log('Vertex moved on outer path.');
console.log(obj.lat() ,'--', obj.lng() );
});
Hi I am using google maps api(JavaScript) to build an interactive world map. It went really well until I ran into this problem. I am using polygons to show to outline of a country. These polygons trigger a modal showing information about the country when clicked on. This worked until I started to use "Data Layer: Earthquake data". Instead of using earthquake data I use sales information of the company I work at. So if a large share of our customers are from the Netherlands then the datalayer assigned to the Netherlands will be very large. The problem is that because of the datalayers the countries are no longer clickable. I can not click "through" the datalayer. Is there a possibility that I can trigger the event behind the datalayer?
This code displays the datalayers:
map.data.loadGeoJson('./data/test.json');
map.data.setStyle(function(feature) {
var percentage = parseFloat(feature.getProperty('percentage'));
return ({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: percentage,
fillColor: '#00ff00',
fillOpacity: 0.35,
strokeWeight: 0
}
})
});
map.data.addListener('mouseover', function(event) {
map.data.overrideStyle(event.feature, {
title: 'Hello, World!'
});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
function eqfeed_callback(data) {
map.data.addGeoJson(data);
}
This code displays the polygons:
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: 'transparent',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#cd0000',
fillOpacity: 0,
name: rows[i][0]
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({
fillOpacity: 0.3
});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({
fillOpacity: 0
});
});
google.maps.event.addListener(country, 'click', function() {
var countryName = this.name;
var code = convert(countryName); // Calls a function that converts the name of the country to its official ISO 3166-1 alpha-2 code.
var modal = document.querySelector('.modal');
var instance = M.Modal.init(modal);
instance.open();
});
country.setMap(map);
}
}
If read in the documentation that changing the zIndex won't work because "Markers are always displayed in front of line-strings and polygons."
Is there a way to click on a polygon behind a datalayer?
EDIT
I tried to give the polygon a higher zIndex and I made the datalayer not clickable
map.data.loadGeoJson('./data/test.json');
map.data.setStyle(function(feature) {
var percentage = parseFloat(feature.getProperty('percentage'));
return ({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: percentage,
fillColor: '#00ff00',
fillOpacity: 0.35,
strokeWeight: 0,
clickAble: false,
zIndex: 50
}
})
});
function eqfeed_callback(data) {
map.data.addGeoJson(data);
}
function drawMap(data) {
var rows = data['rows'];
for (var i in rows) {
if (rows[i][0] != 'Antarctica') {
var newCoordinates = [];
var geometries = rows[i][1]['geometries'];
if (geometries) {
for (var j in geometries) {
newCoordinates.push(constructNewCoordinates(geometries[j]));
}
} else {
newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
}
var country = new google.maps.Polygon({
paths: newCoordinates,
strokeColor: 'transparent',
strokeOpacity: 1,
strokeWeight: 0.3,
fillColor: '#cd0000',
fillOpacity: 0,
name: rows[i][0],
zIndex: 100
});
google.maps.event.addListener(country, 'mouseover', function() {
this.setOptions({
fillOpacity: 0.3
});
});
google.maps.event.addListener(country, 'mouseout', function() {
this.setOptions({
fillOpacity: 0
});
});
google.maps.event.addListener(country, 'click', function() {
var countryName = this.name;
var code = convert(countryName); // Calls a function that converts the name of the country to its official ISO 3166-1 alpha-2 code.
var modal = document.querySelector('.modal');
var instance = M.Modal.init(modal);
instance.open();
});
country.setMap(map);
}
}
//console.log(map);
//test(map)
}
EDIT
Apparently the datalayer wasn't the problem, but the icon was. That is why it didn't work when I did this:
map.data.setStyle(function(feature) {
var percentage = parseFloat(feature.getProperty('percentage'));
return ({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: percentage,
fillColor: '#00ff00',
fillOpacity: 0.35,
strokeWeight: 0,
clickable: false
}
})
});
The correct way to do it is this:
map.data.setStyle(function(feature) {
var percentage = parseFloat(feature.getProperty('percentage'));
return ({
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: percentage,
fillColor: '#00ff00',
fillOpacity: 0.35,
strokeWeight: 0
},
clickable: false
})
});
You basically have 2 options here:
Set the zIndex of your Polygons to a higher number than the data layer. Your Polygons will be clickable but obviously will appear above the data layer, which might not be what you want.
Set the clickable property of the data layer to false so that you can click elements that are below. This will work if you don't need to react to clicks on the data layer...
Option 2 example code:
map.data.setStyle({
clickable: false
});
Edit: Full working example below, using option 2. As you can see the Polygon is below the data layer but you can still click it.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
var polygon = new google.maps.Polygon({
strokeOpacity: 0,
strokeWeight: 0,
fillColor: '#00FF00',
fillOpacity: .6,
paths: [
new google.maps.LatLng(-26, 139),
new google.maps.LatLng(-23, 130),
new google.maps.LatLng(-35, 130),
new google.maps.LatLng(-26, 139)
],
map: map
});
polygon.addListener('click', function() {
console.log('clicked on polygon');
});
// Load GeoJSON
map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
// Set style
map.data.setStyle({
fillColor: '#fff',
fillOpacity: 1,
clickable: false
});
}
#map {
height: 200px;
}
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<div id="map"></div>
I have found that after, setting the z-order, the maps api does not reliably send clicks to polygon feature in the top layer when there are many polygons.
I had one data layer of regions where each feature is a precinct boundary. When you click on one feature, it loads another data layer on top. The top layer consists of polygons inside the region with a higher z-order, representing house title boundaries within that region.
After the houses are loaded, clicking on a house should send the click to the house polygon, not the region. But this sometimes failed - especially if there are many houses.
To resolve the issue, after clicking on a region feature, I set that feature to be non clickable. Then the clicks always propagate to the correct house feature. You can still click on other features of the lower layer, just not the selected one. This solution should work if your data and presentation follows a similar pattern.
/* private utility is only called by this.hideOnlyMatchingFeaturesFromLayer() */
_overrideStyleOnFeature(feature, layer, key, value, overrideStyle, defaultStyle) {
if (feature.getProperty(key) === value) {
if (this.map) {
layer.overrideStyle(feature, overrideStyle);
}
} else {
if (this.map) {
layer.overrideStyle(feature, defaultStyle);
}
}
}
/* Apply an overrideStyle style to features in a data layer that match key==value
* All non-matching features will have the default style applied.
* Otherwise all features except the matching feature is hidden!
* Examples:
* overrideStyle = { clickable: false,strokeWeight: 3}
* defaultStyle = { clickable: true,strokeWeight: 1}
*/
overrideStyleOnMatchingFeaturesInLayer(layer, key, value, overrideStyle, defaultStyle) {
layer.forEach((feature) => {
if (Array.isArray(feature)) {
feature.forEach((f) => {
_overrideStyleOnFeature(f, layer, key, value, overrideStyle, defaultStyle);
});
} else {
_overrideStyleOnFeature(feature, layer, key, value, overrideStyle, defaultStyle);
}
});
}
/* example usage */
overrideStyleOnMatchingFeaturesInLayer(
theRegionsDataLayer,
'PROP_NAME',
propValue,
{ clickable: false, strokeWeight: 3},
{ clickable: true, strokeWeight: 1}
);
I'm drawing multiple predefined shapes on a google map using the drawingManager.
The code gets a shape data, draws it properly and attaches a click event.
for some reason, all click events are attached to the last created shape.
the function goes over a shapes array that looks like this:
var shapes = [];
shapes.push({type: "rectangle",color: "#1E90FF",bounds: {north:-33.801973518065886,east:150.1171875,south:-34.17090836352573,west:149.0350341796875},});shapes.push({type: "circle",color: "#FF1493",center_lat: -34.58799745550482,center_lng: 149.0570068359375,radius: 53651.36068322843,});shapes.push({type: "circle",color: "#FF1493",center_lat: -33.47269019266663,center_lng: 150.732421875,radius: 29928.694032699615,});
the code looks like this:
function drawShaps(clickable) {
for (var shape in shapes) {
if (shapes[shape].type == 'circle') {
overlay = new google.maps.Circle({
map: map,
center: {lat: shapes[shape].center_lat, lng: shapes[shape].center_lng},
radius: shapes[shape].radius,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: shapes[shape].color
});
} else if (shapes[shape].type == 'polyline') {
overlay = new google.maps.Polyline({
map: map,
path: shapes[shape].coordinates,
geodesic: true,
strokeWeight: 2,
fillOpacity: 0.45,
strokeColor: shapes[shape].color
});
} else if (shapes[shape].type == 'rectangle') {
overlay = new google.maps.Rectangle({
map: map,
bounds: shapes[shape].bounds,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: shapes[shape].color
});
} else if (shapes[shape].type == 'polygon') {
overlay = new google.maps.Polygon({
map: map,
paths: shapes[shape].coordinates,
geodesic: true,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: shapes[shape].color
});
}
overlay.type = shapes[shape].type;
overlay.color = shapes[shape].color;
overlays.push(overlay);
if (clickable) {
google.maps.event.addListener(overlay, 'click', function(e) {
clickSelectShape(overlay, e);
});
}
}
}
What am I missing here ? I understand it has to do with scope / variable address - but don't get it ...
Ok, found the issue - if anyone has the same problem in the future.
var overlay was declared once for the whole function - and was over-written while in the loop - i.e. binding the different click events to the same shape.
The proper way is to create different createShape functions, each defining it's own var overlay - and therefor binding the events to the right overlays
function drawShaps(clickable) {
for (var shape in shapes) {
if (shapes[shape].type == 'circle') {
createCircle(shapes[shape], clickable);
} else if (shapes[shape].type == 'polyline') {
createPolyline(shapes[shape], clickable);
} else if (shapes[shape].type == 'rectangle') {
createRectangle(shapes[shape], clickable);
} else if (shapes[shape].type == 'polygon') {
createPolygon(shapes[shape], clickable);
}
}
}
function createCircle(newShape, clickable) {
var overlay = new google.maps.Circle({
map: map,
center: {lat: newShape.center_lat, lng: newShape.center_lng},
radius: newShape.radius,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: newShape.color
});
overlay.type = newShape.type;
overlay.color = newShape.color;
overlays.push(overlay);
if (clickable) {
google.maps.event.addListener(overlay, 'click', function(e) {
clickSelectShape(overlay, e);
});
}
}
function createPolyline(newShape, clickable) {
var overlay = new google.maps.Polyline({
map: map,
path: newShape.coordinates,
geodesic: true,
strokeWeight: 2,
fillOpacity: 0.45,
strokeColor: newShape.color
});
overlay.type = newShape.type;
overlay.color = newShape.color;
overlays.push(overlay);
if (clickable) {
google.maps.event.addListener(overlay, 'click', function(e) {
clickSelectShape(overlay, e);
});
}
}
function createRectangle(newShape, clickable) {
var overlay = new google.maps.Rectangle({
map: map,
bounds: newShape.bounds,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: newShape.color
});
overlay.type = newShape.type;
overlay.color = newShape.color;
overlays.push(overlay);
if (clickable) {
google.maps.event.addListener(overlay, 'click', function(e) {
clickSelectShape(overlay, e);
});
}
}
function createPolygon(newShape, clickable) {
var overlay = new google.maps.Polygon({
map: map,
paths: newShape.coordinates,
geodesic: true,
fillOpacity: 0.45,
strokeWeight: 0,
fillColor: newShape.color
});
overlay.type = newShape.type;
overlay.color = newShape.color;
overlays.push(overlay);
if (clickable) {
google.maps.event.addListener(overlay, 'click', function(e) {
clickSelectShape(overlay, e);
});
}
}
I want to show a layer map with many style depending on some attribute in the layer, but don't know how,. If I use SLD in geoserver I just show only one style, I have tried writing something in javascript (based on Openlayer library) like below, but it didn't work, the code didn't have any effect to the layer map. Any suggestion will be greatly appreciated.
//create a style object
var style = new OpenLayers.Style();
//rule used for all polygons
var rule_p1 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "1",
}),
symbolizer: {
fillColor: "#00FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p2 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "2",
}),
symbolizer: {
fillColor: "#40FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p3 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "3",
}),
symbolizer: {
fillColor: "#80FF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
var rule_p4 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "vi_tri",
value: "4",
}),
symbolizer: {
fillColor: "#FFFF00",
fillOpacity: 0.6,
strokeColor: "#FF0000",
strokeWidth: 2,
strokeDashstyle: "solid",
}
});
style.addRules([rule_p1, rule_p2, rule_p3, rule_p4]);
mybinh = new OpenLayers.Layer.WMS(
"Lớp Mỹ Bình", urlmapfile,
{
LAYERS: 'demo:mybinh',
transparent:"true",
format: format,
styleMap: style
},
{singleTile: true, ratio: 1, isBaseLayer: false}
);
From your code snippet I assume that you want to serve a WMS Layer provided by the GeoServer. In this case you receive an image file rendered by the server and the styling is part of the Geoserver (SLD). On client side (OpenLayers) you are only able to style Vector features.
You can define different Styles (SLD) for your layer and switch between the styles by changing the WMS query parameter (see http://docs.geoserver.org/latest/en/user/services/wms/reference.html ).
I am getting the latitude/longitude from the DB. I am unable to draw a line between two distances. Here is my code
var auto_refresh = setInterval(
function () {
$.get('http://developer.allsecure.me/Location/longlat', function (data) {
map_canvas.setCenter(new google.maps.LatLng(data.startlat, data.startlong));
clearMarkers();
setMarker(map_canvas, 'center', new google.maps.LatLng(data.startlat, data.startlong), '', '/img/device.png', '', '', true);
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(data.startlat, data.startlong), new google.maps.LatLng(data.endlat, data.endlong)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 10,
map: map
});
}, 'json');
}, 1000);
I don't know why it isn't adding the polylines between the two distances.
As the comment above was the actual solution
When you define the line you use map: map shouldn't this be map: map_canvas?