We Keep Coding

Leaflet Draw - Editing Polygon: Editing does not behave right

i am currently working on a project where a user should be able to edit zones (= polygons). I have created a class Zone which extends L.Polygon so I can create zones and add them to the map. The editing of a specific instance of Zone is triggered by a button, which rund the following code: specificZone.editable.enable()
This works so far and looks like this:
The problem I have, is that when dragging the edit points around, one corner point always behaves like an edge point: So it splits the corner like this:
The other points behave as intended. I hope this was somewhat understandable outlined.
I am thankful for any kind of help. Have a nice day :)
Kind regards
Luca
Edit:
My map gets created as follows:
A Vue Component Map.vue creates an instance of CustomMap.ts:
const customMap = new CustomMap(
document.getElementById("mapcontainer") as HTMLElement,
mapUrl,
mapParams.getData()
);
the mapUrl is the place where the map is stored and the mapParams are previously loaded from a server
In the constructor of CustomMap.ts a L.DrawMap gets created, then the map gets added to the map as an instance of CustomImageOverlay which creates a L.imageOverlay. After that the L.FeatureGroup for the CustomZone(s) gets created.
this.map = L.map(el, {
crs: L.CRS.Simple,
center: [0, 0],
zoom: 4,
minZoom: 2,
maxZoom: 7,
dragging: true,
maxBoundsViscosity: 0.5,
maxBounds: mapBounds,
zoomSnap: 0.25,
zoomDelta: 0.25,
attributionControl: false
});
this.imageOverlay = new CustomImageOverlay(
mapUrl,
mapBounds.getNorthEast(),
mapBounds.getSouthWest(),
{
opacity: 0.5,
interactive: true,
zIndex: -1
},
this.map
);
this.map.addLayer(this.imageOverlay.getLayer());
// Create a group for zones and add it to map
const zoneGroup = new L.FeatureGroup();
zoneGroup.addTo(this.map);
// init drawers
this.polygonDrawer = new L.Draw.Polygon(this.map);
// Layers to show/hide
const overlayLayers: L.Control.LayersObject = {
Zones: zoneGroup,
};
// Create Layer Control with the previous options
const layerControl = new L.Control.Layers(base, overlayLayers);
// Add to map
layerControl.addTo(this.map);
The CustomZone is created and added to the feature group and map.
In the constructor of the customZone the actual polygon gets created by super(latlng, options)
I hope this code gives you better insight :)

Polyline geometry to graphic - SimpleLineSymbol is the only type not displaying on the map

I have modified the ESRI ArcGIS js API Measurement widget to keep a session based history of the measurements the user has made. When a user clicks on a history item, it should display the geometry associated with that history item as a GraphicsLayer on the map. I am using knockout to manage the history items and to retrieve measurement metadata when a history item is clicked.
At this point, both my Polygons (for area) and Points (for location) work just fine with the SimpleFillSymbol() and the SimpleMarkerSymbol(), respectively. However, the Polyline geometry returned from a distance measurement is not displaying on the map with the SimpleLineSymbol().
Here's the code:
var graphicLayerId = "measurementHistoryGraphicsLayer";
function addGraphicsLayerToMap(graphicsLayer) {
var lay = getGraphicsLayerFromMap();
if (lay !== undefined) {
lay.clear();
lay.add(graphicsLayer);
map.removeLayer(lay);
}
map.addLayer(graphicsLayer);
}
function createGraphicFromGeometry(viewModel) {
//Determine the symbol type
var symbol;
switch (viewModel.activeTool) {
case "area":
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 2),
new esri.Color([255, 0, 0, 0.25]));
break;
case "distance":
symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 3);
break;
case "location":
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10,
new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255, 0, 0]), 3),
new esri.Color([0, 255, 0, 0.25]));
break;
}
var graphic = new esri.Graphic(viewModel.geometry, symbol, { "extent": viewModel.extent, "unitName": viewModel.unitName });
return graphic;
}
function createGraphicsLayerFromGraphic(graphic) {
var graphicLayer = new esri.layers.GraphicsLayer({ id: graphicLayerId });
graphicLayer.add(graphic);
graphicLayer.setRenderer(new esri.renderer.SimpleRenderer(graphic.symbol));
return graphicLayer;
}
function getGraphicsLayerFromMap() {
return map.getLayer(graphicLayerId);
}
$(document).on('click', '#emv_measurement_history .list-group-item', function () {
$('#emv_measurement_history .list-group-item.list-group-item-info').removeClass('list-group-item-info');
$(this).addClass('list-group-item-info');
var measurementData = ko.mapping.toJS(ko.dataFor($(this)[0]));
var graphic = createGraphicFromGeometry(measurementData);
var graphicsLayer = createGraphicsLayerFromGraphic(graphic);
addGraphicsLayerToMap(graphicsLayer);
map.setExtent(measurementData.extent);
});
Like I said, this works fine for both area and location, but distance does not seem to work. I've even tried adding a hard-coded polyline value in there are creating a SimpleLineSymbol from that without success.
For additional information, here is the Polyline info:
[
[
[
2591769.2297164765,
5236836.417134136
],
[
2573584.2281166334,
4620357.96034264
],
[
2557384.1428811993,
4038303.8136230526
],
[
3124973.8484519687,
4260007.60486125
],
[
3714518.451309448,
4454862.77067183
],
[
4324318.833989203,
4618552.510359674
],
[
4666465.839330839,
4693607.843734423
],
[
5013294.285789721,
4757423.375729576
]
]
]
And the spatial reference is set to 102100.

I finally figured it out.
I have the geometry from the original measurement stored in a knockout variable. When I was reading from it, it would build out the graphic, symbol, and graphic layer just fine without any errors throwing.
I discovered that for some reason, the data and the spatial reference were mismatched, so I extracted the path from the stored geometry, assigned it to a new polyline variable, re-set the spatial reference to 102100 like I needed, and re-assigned the geometry to the graphic, which worked.
var g = new esri.Graphic(viewModel.geometry, symbol, { "extent": viewModel.extent, "unitName": viewModel.unitName });
if (viewModel.activeTool === "distance") {
var polyline = new esri.geometry.Polyline(viewModel.geometry.paths);
polyline.setSpatialReference(new esri.SpatialReference(102100));
g.setGeometry(polyline);
}

Assign ID to marker in leaflet

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)
}

How to change properties of element in JSXGraph?

Suppose, I have the following piece of code:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]]);
How can I change second point of axis?
Something like ax2.setSecondPoint([2,0])?
In general, how can I set property of any element?
Thank you.

Axis has two properties which names are self-explanatory: point1 and point2.
You can use setPosition method on any of them, e.g.
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0])
Now there is one catch: you will not see this change on the chart unless you set needsRegularUpdate property of the axis object to true. Finally, to refresh the chart you should execute fullUpdate() method on the board variable. The whole looks like this:
var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-8.75, 2.5, 8.75, -2.5]});
var ax2 = brd2.create('axis', [[0,0],[1,0]],{needsRegularUpdate:true});
ax2.point2.setPosition(JXG.COORDS_BY_USER,[2,0]);
brd2.fullUpdate();
References:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.Point.html#setPosition
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Options (search for "special axis options")
Now to change properties like fixed, visible, etc. you should use setAttribute method (setProperty is deprecated). Example:
// Set property directly on creation of an element using the attributes object parameter
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 5, 5, 1]};
var p = board.create('point', [2, 2], {visible: false});
// Now make this point visible and fixed:
p.setAttribute({
fixed: true,
visible: true
});
Source:
http://jsxgraph.uni-bayreuth.de/docs/symbols/JXG.GeometryElement.html#setAttribute
Last but not least a simple formula:
a + b = c
where:
a = using JavaScript debugging tools in browsers to investigate object properties
b = checking documentation for products you use
c= success :)

Can't seem to apply styles to Google MAP API

I trying to change the saturation for this instance of a Google map. Everything else is working EXCEPT the saturation style. What am i doing wrong ?
Code:
$(function() { // when the document is ready to be manipulated.
if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's
var map = document.getElementById("myMap"); // Get div element
var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
m.setCenter(new GLatLng(59.334951,18.088598), 13); // pass in latitude, longitude, and zoom level.
m.openInfoWindow(m.getCenter(), document.createTextNode("Looking Good")); // displays the text
m.setMapType(G_NORMAL_MAP); // sets the default mode. G_NORMAL_MAP, G_HYBRID_MAP
// var c = new GMapTypeControl(); // switch map modes
// m.addControl(c);
// m.addControl(new GLargeMapControl()); // creates the zoom feature
var styleArray = [
{
featureType: "all",
stylers: [
{saturation: -80}
]
}
];
}
else {
alert("Upgrade your browser, man!");
}
});
I have been searching all day (and failing) to find a solution to this problem.

Do you have a line like:
m.setOptions({styles: styleArray});
Somewhere after you've declared the styler? The above line will apply the styles you created to the map that you have.

Looks like your styleArray is never used.

Thanks for all your help i finally figured it out. Feeling a bit stupid but the "m.setOtions" is apparently a function of V3 API and i was using V2.