Related
I have a .geojson file. Inside the file there is one Feature and that feature has this property:
"geometry": { "type": "LineString", "coordinates": [ [ 103.766547, 1.377559, 0.0 ], [ 103.771405, 1.374479, 0.0 ] ] }
What I am trying to do now is something like this: when I mouse over a feature, I want to get two separate latlng objects from within the coordinates array. Using my code below:
map.data.addListener("mouseover", function(event) {
var coordinates = event.feature.getGeometry("coordinates");
console.log(coordinates);
});
Below is what is shown inside the console:
so the coordinates variable contains one 'i' property. 'i' is an array with two objects inside it.
Is it possible to get two separate latlng object from this array ?
I want to achieve this because I hope that later I can get the distance between these two latlng objects.
LineString has a .getArray() method which returns the array of LatLng objects:
map.data.addListener("mouseover", function(event) {
var coordinates = event.feature.getGeometry("coordinates").getArray();
for (var i=0; i<coordinates.length; i++) {
console.log(coordinates[i].toUrlValue(6));
}
});
proof of concept fiddle
I asked a question on StackOverflow (Seeking Javascript library for displaying and editing networks of nodes and edges) and was pointed at the gojs splice sample.
This has got me a long way, so thanks for the answer, but I have run into a brick wall trying to get the behaviour I want.
The app I am trying to create is to edit the borders on a map:
node = place where three or borders meet
link = segment of border between two nodes.
Hence, the nodes and links are unlabelled (nodes are just small circles, links are just polylines).
I have attempted to adapt the splice sample (https://gojs.net/extras/splicing.html) appropriately. The key features I need over and above what the sample does are:
choosing exactly where to position the new node on the link between the existing ones
preserving the shape of the polylines.
(The existing sample puts the new node equidistant between the existing ones and uses straight links.)
The user experience I have tried to create is this: first, you select the link, so it gets its usual adornments; then you shift-click on one of the adornments at a point on the polyline and that point becomes the new node.
I have sought to do this by overriding methods of the LinkReshapingTool using the extension mechanism described at https://gojs.net/latest/intro/extensions.html (rather than creating a subclass).
Whatever I have tried, though, I can't get the polylines to stay. By inspecting the diagram data model in the Chrome DevTools debugger after my code has run, it appears that it is correct (i.e. I can see the correct array of points in the links). However, when I then allow execution to continue the links do not display as expected (they are straight), and if I subsequently look at the data model then the multiple points have disappeared and each link just has a start and end.
I have tried various things, without success, for example:
deferring the splicing till after the tool has completed
passing the points into the modified links in different ways (array v list v string)
putting the processing into different overridden methods.
My current code is below. Please excuse crass stylistic faux pas - I am not an experienced JavaScript programmer.
<!DOCTYPE html> <!-- HTML5 document type -->
<!--
Adapted from splicing example from gojs.net
-->
<html>
<head>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.28/go-debug.js"></script>
</head>
<body>
<div id="myDiagramDiv"
style="width:400px; height:300px; background-color: #DAE4E4;"></div>
<script>
var $ = go.GraphObject.make;
// state variables to remember what to do after reshaping tool aborted
var doSpliceNode = false;
var doSpliceIntoLink = null;
var doSplicePoint = null;
var doSpliceIndex = -1;
// diagram
var myDiagram = $(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
var tool = myDiagram.toolManager.linkReshapingTool;
// Override doMouseDown on linkreshapingtool. If user clicks on a handle with SHIFT pressed, want to insert
// a new node at that point rather than use the default behaviour to (further) reshape the link, and moreover
// want to retain the points in the link. I.e. turn one of the points in the link into a new node.
// (Existing gojs splicing example does not do this: it just puts a new node at the midpoint of the existing
// link, with no regard to the points along the link.)
tool.doMouseDown = function() {
console.log("mousedown at (" + this.Fp.M + "," + this.Fp.N + ")");
console.log(" on link from " + this.adornedLink.fromNode + " to " + this.adornedLink.toNode);
console.log(" with shift pressed? " + myDiagram.lastInput.shift);
var spliced = false;
if (myDiagram.lastInput.shift)
{
// work out which of the points on the link was clicked
var link = this.adornedLink;
var numpts = link.pointsCount;
var i;
var x = this.Fp.M; // ##TODO - by inspection in debugger this contains the X coord, but what's documented place to get this?
var y = this.Fp.N; // ##TODO - ditto for Y coord
for (i = 1; !spliced && (i < numpts - 1); i++)
{
if ((link.getPoint(i).x == x) && (link.getPoint(i).y == y))
{
console.log(" .. at point " + i);
// Store off what to do. (This used to be done inline - deferred to after as one of the things
// to try to make it work.)
doSpliceNode = true;
doSpliceIntoLink = link;
doSplicePoint = new go.Point(x, y);
doSpliceIndex = i;
spliced = true;
}
}
}
//if (!doSpliceNode)
{
console.log(".. call base class doMouseDown");
go.LinkReshapingTool.prototype.doMouseDown.call(tool);
}
}
// Override doMouseUp as well. If we had decided during mousedown to do the splice, then stop the tool now.
tool.doMouseUp = function()
{
// First call base class
go.LinkReshapingTool.prototype.doMouseUp.call(tool);
if (doSpliceNode)
{
// Doing splice - stop tool
console.log("STOP TOOL");
this.stopTool();
this.doDeactivate();
}
}
// Finally, override doStop to actually do the splice
tool.doStop = function() {
console.log("doStop");
// First call base class
go.LinkReshapingTool.prototype.doStop.call(tool);
if (doSpliceNode)
{
// now splice the node
console.log("splice node");
spliceNewNodeIntoLink2(doSpliceIntoLink, doSplicePoint, doSpliceIndex); // ##TODO make it respect points in existing link before and after
}
// Reset everything
doSpliceNode = false;
doSpliceIntoLink = null;
doSplicePoint = null;
doSpliceIndex = -1;
}
// Debug variable for inspecting later - not functional
var debugLastLink = null;
// Model, node and links for this application. Based heavily on https://gojs.net/temp/splicing.html and adapted as needed.
var myModel = $(go.GraphLinksModel);
myDiagram.nodeTemplate = $(go.Node,
"Auto",
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Shape, "Circle", { width: 6, height: 6, strokeWidth: 0 }));
myDiagram.linkTemplate =
$(go.Link,
{
relinkableFrom: true, relinkableTo: true,
reshapable: true, resegmentable: true,
/* selectionAdornmentTemplate: ## COMMENT OUT - NOT NEEDED
$(go.Adornment,
$(go.Shape, { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 2 }),
$(go.Shape, "PlusLine",
{
isActionable: true, // so that click works in an Adornment
width: 16, height: 16, stroke: "green", strokeWidth: 4, background: "transparent",
segmentOffset: new go.Point(8, 0),
click: function(e, shape) {
alert(e);
var link = shape.part.adornedPart;
var p0 = link.getPoint(0);
var p1 = link.getPoint(link.pointsCount - 1);
var pt = new go.Point((p0.x + p1.x) / 2, (p0.y + p1.y) / 2);
// ##TODO - instead, find the position where the mouse was clicked and place the node there
// ... need to work out which segment of polyline this was in so as to calculate new lines
// ##TODO - handle drag of node so that it just affects segments of lines immediately into it, rather than
// blatting over top of them
// ##TODO - what is object e and its components
spliceNewNodeIntoLink(link, pt);
},
cursor: "pointer"
})
), */
toShortLength: 1
},
new go.Binding("points").makeTwoWay(), // Use the points information from the linkDataArray initializer
$(go.Shape, { strokeWidth: 2 })
);
/* function spliceNewNodeIntoLink(link, pt) { // ## original version no longer called
link.diagram.commit(function(diag) {
var tokey = link.toNode.key;
// add a new node
var newnodedata = { text: "on link", location: go.Point.stringify(pt) };
diag.model.addNodeData(newnodedata);
// and splice it in by changing the existing link to refer to the new node
diag.model.setToKeyForLinkData(link.data, newnodedata.key);
// and by adding a new link from the new node to the original "toNode"
diag.model.addLinkData({ from: newnodedata.key, to: tokey });
// optional: select the new node
diag.select(diag.findNodeForData(newnodedata));
}, "spliced in node on a link");
} */
// Utility function used in one attempt to get this to work. Initializers in nodeDataArray do it via an array of numbers,
// so try that here.
function toArray(nodelist)
{
var returnarray = new Array();
var i;
for (i = 0; i < nodelist.size; i++)
{
var pt = nodelist.elt(i);
returnarray.push(pt.x);
returnarray.push(pt.y);
}
return returnarray;
}
// Function to splice the new node into the link. Parameters are
// - link: the link to splice into
// - pt: the point within the link to turn into a node
// - index: index into existing polyline of that point
function spliceNewNodeIntoLink2(link, pt, index) {
link.diagram.commit(function(diag) {
var oldlinkpointslist = link.points;
var link1pointslist = new go.List(go.Point);
var link2pointslist = new go.List(go.Point);
var i;
// Create new points list, from "from" node to new node to be added
for (i = 0; i <= index; i++)
{
var point = new go.Point(link.getPoint(i).x, link.getPoint(i).y);
link1pointslist.add(point);
}
console.log(link1pointslist);
// .. and from new node to "to" node
for (i = index; i < link.pointsCount; i++)
{
var point = new go.Point(link.getPoint(i).x, link.getPoint(i).y);
link2pointslist.add(point);
}
console.log(link2pointslist);
var tokey = link.toNode.key;
// add a new node
var newnodedata = { text: "on link", location: go.Point.stringify(pt) };
diag.model.addNodeData(newnodedata);
// and splice it in by changing the existing link to refer to the new node
diag.model.setToKeyForLinkData(link.data, newnodedata.key);
// ** NEW CODE
// Code this was based on re-used the existing link, re-purposing it to go from "from" node
// to new node, so do the same, but give it a new points list.
link.points = link1pointslist; // ##TODO find out why this doesn't work
// ... actually it does, but something ditches the points later ...
// so maybe I need to move this code to after the tool has really finished operating
// by saving off the info and calling it in an override of the last tool method that
// gets called (perhaps not - did this and it didn't work)
debugLastLink = link; // ##TEMP
// and by adding a new link from the new node to the original "toNode"
// ** UPDATED to include the second new point list
diag.model.addLinkData({ from: newnodedata.key, to: tokey, points: toArray(link2pointslist) });
// optional: select the new node
diag.select(diag.findNodeForData(newnodedata));
}, "spliced in node on a link");
}
// not called at present
function maySpliceOutNode(node) {
return node.findLinksInto().count === 1 &&
node.findLinksOutOf().count === 1 &&
node.findLinksInto().first() !== node.findLinksOutOf().first();
}
// not called at present
function spliceNodeOutFromLinkChain(node) {
if (maySpliceOutNode(node)) {
node.diagram.commit(function(diag) {
var inlink = node.findLinksInto().first();
var outlink = node.findLinksOutOf().first();
// reconnect the existing incoming link
inlink.toNode = outlink.toNode;
// remove the node and the outgoing link
diag.removeParts([node, outlink], false);
// optional: select the original link
diag.select(inlink);
}, "spliced out node from chain of links");
}
}
// Initialize modeldi
myModel.nodeDataArray = [
{ key: "1" , "location": "30 30" },
{ key: "2" , "location": "130 30" },
{ key: "3" , "location": "30 130" }
];
myModel.linkDataArray = [
{ from: "1", to: "2", "points": [ 30,30, 70,20, 100,40, 130,30 ] },
{ from: "2", to: "3", "points": [ 130,30, 100,80, 70,90, 30,130 ] },
{ from: "3", to: "1", "points": [ 30,130, 20,100, 40,70, 30,30 ] }
];
myDiagram.model = myModel;
</script>
</body>
</html>
Some suggestions:
Call Link.findClosestSegment to find the segment where the user clicked to insert a node.
Don't splice in the new node in an override of Tool.doStop, because that will be called even if the user hit the Escape key to cancel the tool's operation. Do it in either doMouseDown or doMouseUp, depending on the behavior that you want. But doStop is a reasonable time to clean up the tool's state.
I think it should work if you add the new Node and a new Link, connect them together properly, make sure the Node is at the right location, and only then set Link.points explicitly. The TwoWay Binding on Link.points will save the points to the model.
The problem that you are encountering is that when you create a new Node it takes time to be measured and arranged and positioned. Any one of those activities will invalidate the routes of all connected links. And obviously connecting a link with a node will invalidate that link's route. So you have to make sure everything is done in the right order.
So i try to achieve a result as on foursquare: https://foursquare.com/explore?cat=drinks&mode=url&near=Paris which is when you clik on a marker on the map, it scrolls through the listed of restaurants on the right -hand side of the screen to the ad hoc restaurant, and highlights it through CSS. Conversely, when you click on the restaurant on the list, it highlights it on the map.
I am using skobbler/leaflet. I think I can achieve this by amending dynamically CSS as shown in this example: http://jsfiddle.net/gU4sw/7/ + a scroll to destination script already in place in the page.
To achieve this however, it looks like I need to assign an ID within the markers (2 markers below):
var marker = L.marker([52.52112, 13.40554]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup1.", { offset: new L.Point(-1, -41) }).openPopup();
var marker = L.marker([52.53552, 13.41994]).addTo(map);
marker.bindPopup("Hello world!<br>I am a popup2.", { offset: new L.Point(-1, -41) }).openPopup();
Question is: How can I assign an marker ID to trigger css change in the corresponding element within my html page?
My knowledge of JS is very limited, but may be there's a nice and easy solution out there, thx
I've been looking for a nice way to do this and as far as I can tell there is still no built-in way (using leaflet) to give a marker an ID. I know I'm a bit late to answering this but hopefully it will help others who stumble upon this question. As far as I can tell there are two main issues here:
Problem #1:
Unless you save your markers to an object or map, described below, there is no easy programmatic way of accessing them later on. For example - A user clicks something OUTSIDE the map that corresponds to a marker INSIDE the map.
Problem #2:
When a user clicks on a marker INSIDE the map, there is no built in way to retrieve the ID of that marker and then use it to highlight a corresponding element or trigger an action OUTSIDE the map.
Solutions
Using a one or more of these options will help address the issues described above. I'll start with the one mentioned in the previous answer. Here is the working pen, which holds all the code found below.
Option #1:
Save each marker, using a hardcoded or dynamic ID, inside an object -
// Create or retrieve the data
var data = [
{
name: 'Bob',
latLng: [41.028, 28.975],
id: '2342fc7'
}, {...}, {...}
];
// Add an object to save markers
var markers = {};
// Loop through the data
for (var i = 0; i < data.length; i++) {
var person = data[i];
// Create and save a reference to each marker
markers[person.id] = L.marker(person.latLng, {
...
}).addTo(map);
}
Similar to the other answer you can now access a single marker by using -
var marker = markers.2342fc7; // or markers['2342fc7']
Option #2:
While leaflet doesn't provide a built-in 'id' option for markers, you can add the an ID to the element directly by accessing ._icon property:
// Create and save a reference to each marker
markers[person.id] = L.marker(person.latLng, {...}).addTo(map);
// Add the ID
markers[person.id]._icon.id = person.id;
Now when you handle click events, it's easy as pie to get that marker's ID:
$('.leaflet-marker-icon').on('click', function(e) {
// Use the event to find the clicked element
var el = $(e.srcElement || e.target),
id = el.attr('id');
alert('Here is the markers ID: ' + id + '. Use it as you wish.')
});
Option #3:
Another approach would be use the layerGroup interface. It provides a method, getLayer, that sounds like it would be perfect get our markers using an ID. However, at this time, Leaflet does not provide any way to specify a custom ID or name. This issue on Github discusses how this should be done. However you can get and save the auto-generated ID of any Marker (or iLayer for that matter) like so:
var group = L.layerGroup()
people.forEach(person => {
// ... create marker
group.addLayer( marker );
person.marker_id = group.getLayerId(marker)
})
Now that we have every marker's ID saved with each backing object in our array of data we can easily get the marker later on like so:
group.getLayer(person.marker_id)
See this pen for a full example...
Option #4:
The cleanest way to do this, if you have the time, would be to extend the leaflet's marker class to handle your individual needs cleanly. You could either add an id to the options or insert custom HTML into the marker that has your id/class. See the documentation for more info on this.
You can also you use the circleMarker which, in the path options, you will see has an option for className which can be nice for styling groups of similar markers.
Styling:
Almost forgot that your original question was posed for the purpose of styling... simply use the ID to access individual elements:
.leaflet-marker-icon#2342fc7 { ... }
Conclusion
I'll also mention that layer and feature groups provide another great way to interface with markers. Here is a question that discusses this a bit. Feel free to tinker with, or fork either the first or second pen and comment if I've missed something.
An easy way to do this is to add all the markers to a list with a unique id.
var markersObject = {};
markersObject["id1"] = marker1;
markersObject["id2"] = marker2;
markersObject["id3"] = marker3;
If the list of restaurants have a property in the html element of a single restaurant that corresponds to the id of the added marker. Something like:
Click
Then add the click event where you will pass the id of the restaurant (in this case "data-restaurantID") and do something like:
markersObject["passedValueFromTheClickedElement"].openPopup();
This way once you click on the item in the list a markers popup will open indicating where on the map is the restaurant located.
var MarkerIcon = L.Icon.extend({
options: {
customId: "",
shadowUrl: 'leaf-shadow.png',
iconSize: [64, 64],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new MarkerIcon({iconUrl: "/resources/images/marker-green.png"}),
redIcon = new MarkerIcon({iconUrl: "/resources/images/marker-red.png"}),
orangeIcon = new MarkerIcon({iconUrl: "/resources/images/marker-orange.png"});
var mymap = L.map('mapid').setView([55.7522200, 37.6155600], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
// добавить маркер
L.marker([55.7522200, 37.6155600], {customId:"010000006148", icon: greenIcon, title:setMarkerTitle("010000006148")}).addTo(mymap).on('click', markerOnClick);
L.marker([55.7622200, 37.6155600], {customId:"010053166625", icon: redIcon, title: setMarkerTitle("010053166625")}).addTo(mymap).on('click', markerOnClick);
function markerOnClick(e) {
var customId = this.options.customId;
document.location.href = "/view/abonents/" + customId;
}
function setMarkerTitle(customId){
var result = customId;
result += "\nline2 ";
result += "\nline3 ";
return result;
}
For my case, I found the best way was to generate and pass a unique ID to L.marker's Options object when I create it.
const newMarker = L.marker([lat, lng], { uniqueID })
You can then add this marker to a leaflet layerGroup.
const newLayerGroup = L.layerGroup().addTo(map);
newLayerGroup.addLayer(newMarker);
You can access the ID with layer.options.uniqueID This allows me to find and manipulate the marker later; all I need is Leaflet's .eachLayer() and the uniqueID.
My backend (Cloud Firestore) already generates unique document ID's, which makes it super easy to sync my Leaflet map and backend in real-time, rather than rebuilding and remounting the entire layerGroup or refreshing the page.
//e.g. a callback which fires whenever a doc has been removed from my db
newLayerGroup.eachLayer((layer) => {
if (deletedDocID === layer.options.uniqueID) {
newLayerGroup.removeLayer(layer);
}
});
I just added an ID to the extended control that got created, by using setAttribute.
Here is an example:
var someViewer = L.Control.extend({
onAdd: function () {
var someContainer = L.DomUtil.create('div');
var someDiv = L.DomUtil.create('div');
someDiv.setAttribute('id', 'SPQR_Gauge'); // <-- Just add this line to get an ID
// code continues down ...
After that, you can use pretty much anything. Style, innerHTML, you name it.
document.getElementbyId('someDiv').style = // bla bla bla
My solution is storing ID in e.target.options
function mark_click(e){
console.log(`${e.target.options.id} has been click`);
}
for (var i in data) {
var row = data[i];
var marker = L.marker([row.lat, row.lng], {
opacity: 1,
icon: myIcon,
id:123
});
marker.addTo(mymap).on('click', mark_click);
}
Leaflet's className option can allow one to add identifiers to objects:
var onMouseover = function() {
// returns all members of the specified class
d3.selectAll(".mySpecialClass")
.style("opacity", ".1");
};
// add desired class to pointer
L.circleMarker([46.85, 2.35], {className: "mySpecialClass"})
.addTo(map).on('mouseover', onMouseover);
// to select the marker(s) with a particular class, just use css selectors
// here's a d3.js solution
d3.selectAll(".mySpecialClass")
.style("opacity", ".3")
A fairly straight forward and easy way to accomplish creating an array of clickable markers within a leaflet map object is to manipulate the class list of the created marker by adding a custom incremented class name to each marker. Then it is easy to create a listener and know which marker was clicked. By skipping the active one or not, each has a retrievable click event with a reliable ID.
// creates markers, each with a leaflet supplied class
if (length === 1) {
for (i = 0; i < parks.length; ++i) {
if (parks[i].parksNumber !== parks.parksNumber)
L.marker([parks[i].latitude, parks[i].longitude], {
icon: parks[i].iconMarker
}).addTo(mymap);
}
}
// select all of the leaflet supplied class
let markers = document.querySelectorAll(".leaflet-marker-icon");
// loop through those elements and first assign the indexed custom class
for (i = 0; i < markers.length; ++i) {
markers[i].classList.add("marker_" + parks[i].parksNumber);
// then add a click listener to each one
markers[i].addEventListener("click", e => {
// pull the class list
let id = String(e.target.classList);
// pull your unique ID from the list, be careful cause this list could
// change orientation, if so loop through and find it
let parksNumber = id.split(" ");
parksNumber = parksNumber[parksNumber.length - 1].replace("marker_", "");
// you have your unique identifier to then do what you want with
search_Number_input.value = parksNumber;
HandleSearch();
});
}
1.) Lets create Marker with unique id...
L.marker([marker.lat, marker.lng],{customID:'some ID',title:marker.title}).on('click', this.markerClick).addTo(mymap);
2.) Go to node_modules#types\leaflet\index.d.ts and add customID?:string;
export interface MarkerOptions extends InteractiveLayerOptions {
icon?: Icon | DivIcon;
title?: string;
....
autoPanSpeed?: number;
customID:string;
}
3.) In the same file add customID to LeafletMouseEvent
export interface LeafletMouseEvent extends LeafletEvent {
latlng: LatLng;
layerPoint: Point;
containerPoint: Point;
originalEvent: MouseEvent;
customID:customID
}
4.) Create customID class
export class customID {
constructor(customID: string);
customID: number;
}
5.) Get your marker id in function
markerClick(e){
console.log(e.sourceTarget.options.customID)
}
I'm dynamically adding controls to a dat.gui interface, but the "save settings" functionality doesn't recognize them.
var mygui = new dat.GUI();
mygui.remember(mygui);
// standard way of adding a control
mygui.control1 = 0.0;
var control = mygui.add(mygui, 'control1', -1, 1);
// adding controls dynamically
var myArray = ['control2', 'control3'];
var controls = [];
for (x in myArray) {
controls[myArray[x]] = 0.0;
var newControl = mygui.add(controls, myArray[x], -1, 1);
}
The controls all work as expected, but when I click the gear icon, the settings JSON only contains the first control, or any other controls I add in the normal way:
{
"preset": "Default",
"closed": false,
"remembered": {
"Default": {
"0": {
"control1": 0.5,
}
}
},
"folders": {}
}
I assume I'm confusing the remember() functionality somehow, any ideas?
The lines in the for loop should be:
mygui[myArray[x]] = 0.0;
var newControl = mygui2.add(mygui, myArray[x], -1, 1);
The first parameter of the add function performs two functions: it is both the source of the second parameter (the name of the control to be added, which in this case is myArray[x]) but also the destination. You can store the control names wherever you like, but if the first parameter isn't the gui, the remember() function won't know about the controls, and they won't be added to the gui's __rememberedObjects attribute or saved in the JSON object.
I'm trying to implement class for handling Multipolygon (derived from OpenGIS Multipolygon specification). My primary goal was extend MVCObject and internally manage an array of google.maps.Polygon. But when I'm trying to bind my Multipolygon's properties (with .bindTo method) to underlying Polygons in the loop, it seems that only the last polygon finally binded .
google.maps.MultiPolygon.prototype = new google.maps.MVCObject();
...
for (var n = 0; n < this.polygons.length; n++)
{
for (var i in MultiPolygonOptions) this.bindTo(i, this.polygons[n], i);
}
...
Is it possible to bind MVCObject's property to multiple targets in google maps v3? If no, maybe there are some workarounds? Thanks.
As I considered, after some illegal digging of gmaps puzzly source code, it became clear - it is not possible to add multiple targets when binding some key using MVCObject.bindTo.
But I've discovered some workaround. I've put targets (polygons) I wanted to bind into MVCArray, then binded array to property using someObject.bindTo(your_key, MVCArray_with_targets). Then I've attached arrays change function to listen and to pass changed properties to array elements. Surely, this works only one way, but it is sufficient in my case.
google.maps.MultiPolygon = function(options)
{
var self = this;
...
var gpolys = new google.maps.MVCArray();
// creating polygons from paths
polysOptions.forEach(function(value, number)
{
gpolys.push(self.__createPolygon(value));
});
// bind all parent properties to array and set it before (or this turns parent keys undefined)
for (var i in MultiPolygonOptions) { gpolys.set(i, this.get(i)); this.bindTo(i, gpolys); }
// pass changes to array members which is google.maps.Polygon instances
gpolys.changed = function(prop)
{
this.forEach(function(poly)
{
poly.set(prop, self.get(prop));
});
}
this.set('polys', gpolys);
}
google.maps.MultiPolygon.prototype = new google.maps.MVCObject();
Now, I can control appearance of all child polygons in my MultiPolygon in one place, just like with simple Polygon.
var mpoly = new google.maps.MultiPolygon({ options });
mpoly.setMap(map);
mpoly.setValues({
fillOpacity: 0.5,
fillColor: 'yellow'
});