I have got a Map where I display Markers whenever a user clicks on the map in order to draw a Polygon. Now I want to allow the user to edit an already set Marker. That means he should be able to klick on the marker and drag it to the desired position.
In order to edit the position of only one Marker I need to identify the one Marker that is being dragged in order to pass the changed position to the according Marker.
I am trying to do this inside the my eventHandler because here I can get some more information for the Marker. Here is one of my handler and the handler where all the updating of the position should happen.
[EventUtils.DRAG_END]: (event, details) => {
const target = event.target;
if (target instanceof H.map.Marker) {
this.disableMapBehaviour = false;
const id = target.getId();
this.props.onDrag(details.calculateGeoCoords(), id);
this.forceUpdate();
}
My problem is that the getId() function always gives me random ID's. When I set 10 markers for example, this is how the sequence of the Marker ID looks like:
1 Marker has ID of 2
2 Marker has ID of 3
3 Marker has ID of 5
4 Marker has ID of 6... and the rest is always different.
Why does the Map set the ID's randomly and not like 1,2,3,4,5... ?
Or what am I doing wrong? Should I use something else than the event.target.getId()
Summary: The map doesn't set the Ids randomly. It was me who did not splice the array of Markers when the dragging was finished. Works fine now with getId()
Related
I have openlayers project. There are two object in the map. Polygon and point. I want to make edit operations in this objects. For example When I click the edit button I drag the corner of polygon, after this I want to change new polygon which have new coordinates. I did this operation for polygon but when I select the point inside of polygon I cant select point I can only select again polygon.
When I click the edit button and select point. Point is not select only polygon selected which belongs to polygon
this is my edit code
function ActiveEdit() {
var select = new ol.interaction.Select({
wrapX: false
});
var modify = new ol.interaction.Modify({
features: select.getFeatures()
});
map.addInteraction(select);
map.addInteraction(modify);
}
How do I select the list of push pins inside the polygon in bong maps.
In the example below I see the push pins inside the selected polygon get highlighted but is there a code sample that i can see/use where they maybe get a list of push pins details on selection ?
http://bingmapsv8samples.azurewebsites.net/#Select%20Data%20in%20Drawn%20Polygon%20Area
From the source code, it seems to be generated randomly. To get the list
use the variable pinLayer.
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(30, map.getBounds(), { color: 'purple' });
pinLayer.add(pushpins);
I displayed multiple markers on the AGM map using latitudes and longitudes. I want to display full address on each marker. Can anybody help me to display full address on click or hover to each marker?
I have used below example to display map using Angular.
https://stackblitz.com/edit/angular-google-maps-demo?file=app%2Fapp.component.html
Here is my solution for the normal InfoWindow, but it should work with SnazzyWindow as well:
**.html**
<agm-map>
<agm-marker *ngFor="let marker of markers"
(markerClick)="openWindow(marker.id)"
[latitude]="marker.lat"
[longitude]="marker.lng">
<agm-info-window
[isOpen]="isInfoWindowOpen(marker.id)"
[latitude]="marker.lat"
[longitude]="marker.lng">InfoWindow #{{marker.id}}</agm-info-window>
</agm-marker>
</agm-map>
<button type="button" (click)="openWindow(5)">Open InfoWindow 5</button>
**.ts**
openedWindow : number = 0; // alternative: array of numbers
openWindow(id) {
this.openedWindow = id; // alternative: push to array of numbers
}
isInfoWindowOpen(id) {
return this.openedWindow == id; // alternative: check if id is in array
}
Make sure you added the latitude and longitude attributes to <agm-marker> and <agm-info-window>. Otherwise the <agm-info-window> position would differ from the marker, when you open it by the button.
If you want to have multiple info windows open at the same time, have a look at the comments above, starting with alternative:.
You may need to add more attributes to make it work. The code is limited to explain the basic functionality.
I'm using leaflet-groupedlayercontrol to add my grouped layers to the map and I have a problem:
All the layers are deselected, but I want to select all by default. I am using checkboxes, not radio buttons.
var groupedOverlays = {
"Select": {}
};
groupedOverlays["Select"]["Group 1"] = groups[0];
groupedOverlays["Select"]["Group 2"] = groups[1];
groupedOverlays["Select"]["Group 3"] = groups[2];
// Use the custom grouped layer control, not "L.control.layers"
L.control.groupedLayers(null, groupedOverlays, {collapsed:false}).addTo(map);
I tried to select them with JS, but didn't worked.
If you know a solution for LeafletJS, but not for that particular plugin, it's ok too.
Whether a Leaflet layer is ""selected"" or not in the built-in L.Control.Layers depends on whether the layer is added to the map or not.
e.g. this will display a L.Control.Layers with the checkbox off:
L.control.layers({}, {
Foo: L.marker([0,0])
}).addTo(map)
...while this will display it with the checkbox on:
L.control.layers({}, {
Foo: L.marker([0,0]).addTo(map)
}).addTo(map)
I expect the behaviour of the GroupedLayers control to be similar. Just double-check whether you add the layers to the map or not. Also notice that the checkboxes' state updates whenever layers are added/removed to/from the map by any means, at any time.
I know from reading the assoc. Google group that there is not currently an event for clicking a specific point when using the marker map (only regionClick is implemented).
But was reading the docs and noticed the event Select which says:
select Fired when the user clicks a visual entity. To learn what has
been selected, call getSelection(). None
and
setSelection() none Selects the specified chart entities. Cancels any
previous selection. Selectable entities are regions with an assigned
value. A region correlates to a row in the data table (column index is
null). For this chart, only one entity can be selected at a time.
Extended description.
Would I be able to use this to get the entry that was clicked?
Example:
data.addRows([
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41]
]);
Somehow get that Milan was clicked? How would I do this? Or am I reading this wrong?
Google API for Geomaps: http://code.google.com/apis/chart/interactive/docs/gallery/geochart.html
Google Group stating there is no click event in Marker mode:
https://groups.google.com/forum/?fromgroups#!topic/google-visualization-api/K8uJoes8ZH0
You need call getSelection function when the select event is called. This function returns an array of objects. Each object have row and column attributes (if any). Use the row and the first column (0) to retrieve the label name (Rome, Milan, ...).
Example (http://jsfiddle.net/VtZQh/):
google.visualization.events.addListener(chart, 'select', function() {
var selection = chart.getSelection()[0];
var label = data.getValue(selection.row, 0);
alert(label);
});
Please refer to documentation to know more about getSelection.