We Keep Coding

Leaflet not taking all data when extending markers

I have extended my leaflet object by setting two now attributes:
- Value
- Name
var customMarker = L.Marker.extend({
options: {
name: '',
value: ''
}
});
Then I call this method:
L.geoJson(centroids,{
pointToLayer: function(feature,geometry){
var marker = new customMarker(geometry);
marker.value = donnees[feature.properties.Index];
marker.name = feature.properties.Index;
console.log("name : "+marker.name+" volume : "+marker.volume)
return marker;
}
});
But I noticed that not all the marker.value are stored in my markers. some have unidentified as value.

What you are doing is creating new options in your extended L.Marker. You can set options during instanciation of your marker. Simple example:
// Extending marker with custom option
L.Marker.Custom = L.Marker.extend({
options: {
customValue: false
}
});
// Instanciating without custom option:
var marker = new L.Marker.Custom([0,0]);
console.log(marker.options.customValue); //false
// Instanciating with custom option:
var marker = new L.Marker.Custom([0,0], {
customValue: true
});
console.log(marker.options.customValue); //true
Thing is, that if you only need to have some custom options, there is no need to extend L.Marker but you can simply instanciate L.Marker with a custom option:
// Instanciating regular L.Marker with custom option:
var marker = new L.Marker([0,0], {
customValue: true
});
console.log(marker.options.customValue); //true
You only need to extend L.Marker when you need a default value for your custom option.

Looks like just JS issue. In your donnes array you don't have all the indexes you are trying to access
marker.value = donnees[feature.properties.Index];
that's why you get undefined in marker.value
Check if donnees[feature.properties.Index] doesn't give you undefined and only then return a proper marker

Finding a specific layer in a Leaflet LayerGroup where layers are polygons

I'm trying to define a bunch of Leaflet polygons like this :
var poly = new L.Polygon([
[10.1840229, 36.8906981],
[10.1840393, 36.8906669],
[10.1840989, 36.8906868],
[10.1840826, 36.890718],
[10.1840229, 36.8906981]
], {
'id': 'someId'
});
Then I'm grouping those polygons in a GroupLayer like so :
var group = new L.LayerGroup([poly1, poly2, ..., polyn]);
group.addTo(map);
Can I find those polygons by Id using group.getLayer() ?
Or do I need to define the layers/polygons differently to be able to do this ?

Leaflet assigns it own unique ID to each layer:
var marker = new L.Marker(...);
console.log(marker._leaflet_id) // 24
var polygon = new L.Polygon(...);
console.log(polygon._leaflet_id) // 25
The getLayer method of L.LayerGroup, L.FeatureGroup and L.GeoJSON take those ID's as a parameter:
var layerGroup = L.LayerGroup([marker, polygon]);
layerGroup.getLayer(24); // returns the marker
layerGroup.getLayer(25); // returns the polygon
You could also easily assign your own ID's:
var marker = new L.Marker(...);
marker.id = 'foo';
var polygon = new L.Polygon(...);
polygon.id = 'bar';
And then fetch them like this:
var layerGroup = L.LayerGroup([marker, polygon]);
layerGroup.eachLayer(function (layer) {
if (layer.id === 'foo') // it's the marker
if (layer.id === 'bar') // it's the polygon
});
You can easily throw that into a function and include it in L.LayerGroup:
L.LayerGroup.include({
customGetLayer: function (id) {
for (var i in this._layers) {
if (this._layers[i].id == id) {
return this._layers[i];
}
}
}
});
var layerGroup = L.LayerGroup([marker, polygon]);
layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon
EDIT: Didn't spot the ID in your example untill the indented edit. You can also assign it as an option like in your example and create a custom get function to retreive the layer:
L.LayerGroup.include({
customGetLayer: function (id) {
for (var i in this._layers) {
if (this._layers[i].options.id == id) {
return this._layers[i];
}
}
}
});
var layerGroup = L.LayerGroup([marker, polygon]);
layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon
If you ever need to identify the type of a layer you can do so by using instanceof:
The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof
var layerGroup = L.LayerGroup([marker, polygon]);
layerGroup.eachLayer(function (layer) {
if (layer instanceof L.Marker) // it's the marker
if (layer instanceof L.Polygon) // it's the polygon
});
But remember when you find yourself making common selections should ideally have put those features in separate layer/featuregroups.

The getLayer() method of Layer Group expects a very specific ID: the one that is automatically assigned by Leaflet when "stamping" a layer (e.g. using myId = L.stamp(myLayer)).
Therefore you would not be able to use pre-defined ID's.
If you can work with ID's defined dynamically (i.e. not known in advance), you could easily record those and use them to retrieve your layers (polygons).

How do I access and hide markers created by loadGeoJson()?

I am loading custom coordinates into my map application via JSON. I have been able to find out how to color code the markers based on feature properties, but one of my next steps will be to create filters to show or hide markers based on the properties.
My code starts like this:
var map;
var infowindow = new google.maps.InfoWindow();
function initialize()
{
var mapCanvas = document.getElementById('map');
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
map.data.loadGeoJson('/map_json.php', null, SetBounds);
map.data.setStyle(function(feature) {
var color = 'FF0000';
var symbol = '%E2%80%A2'; // dot
// color selection code here [...]
return /** #type {google.maps.Data.StyleOptions} */ {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=' + symbol + '|' + color
};
}
I already found how I can access the imported data through a jquery autocomplete search:
$(input).autocomplete({
minLength: 0,
source: function(request, response) {
data = [];
map.data.forEach(function(feature)
{
var str = request.term.toUpperCase();
if (String(feature.getProperty('name')).toUpperCase().indexOf(str) > -1)
{
data.push({id: feature.getProperty('id'), name: feature.getProperty('name'), address: feature.getProperty('address')});
}
});
response(data);
},
select: function(event, ui)
{
map.data.forEach(function(feature)
{
if (feature.getProperty('id') == ui.item.id)
{
var content = GetContent(feature);
infowindow.setContent(content);
infowindow.setPosition(feature.getGeometry().get());
infowindow.setOptions({pixelOffset: new google.maps.Size(0, -34)});
infowindow.open(map);
// zoom in
map.setZoom(15);
map.panTo(feature.getGeometry().get());
return false;
}
});
}
})
.autocomplete().data('uiAutocomplete')._renderItem = function(ul, item)
{
return $('<li>')
.append('<a>' + item.name + ' (ID: ' + item.id + ')<br>' + item.address + '</a>')
.appendTo(ul)
};
So using this same principle to run my filters is not a problem.
The problem is that I have not found a way yet to access the visible markers based on the feature information that I have in map.data.
All the examples I found so far are based on the principle of manually adding markers and storing them in an array to access later, e.g.:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
But I don't have that - I load the entire set of data using getGeoJson().
How can I access the marker and manipulate it (e.g. hide it or show it) based on the information I can access using map.data.forEach()?
--- Update ---
Here are more details on the project.
The map will markers that are generated from a list of customers. The customers have different categories and properties, so a typical entry form the GeoJSON string would look like this:
{"type":"Feature","geometry":{"type":"Point","coordinates":[0,0]},"properties":{"name":"Customer 1","id":"1001","address":"1234 Test Street, Test City, TX 12345, USA","category":"vendor","active":1}}
Also on the map is a filter box with checkboxes that are checked by default. Clicking any of them will run the filtering code that should hide or remove the markers that are associated with any customers that match that filter.
So if I disable the checkbox that filters "inactive", then only customers with the property "active":1 will remain on the map. If I disable the checkbox that filters "vendors", then all customers with the category "vendor" will be hidden.
Checking the checkboxes again later will undo the hiding of these entries.
What I have found in my research is a lot of mentioning of markers, but ONLY if they are added manually - not via GeoJSON import.
I can see a few potential solutions to my problem - I could ignore the GeoJSON format and instead import the client list into jQuery manually and parse it from there into markers that then go into an array. But then why use the GeoJSON format at all?
My current solution of using map.data.setStyle() (see comment) seems to work and do the job. But I am curious if there isn't another more direct way.
I figured, the filter function would go through all data (map.data.forEach()) to locate any items that should be hidden based on the filters, and then each item would communicate to its associated marker that the marker needs to be hidden. But it is this association that I have not been able to figure out so far.
When I loop through all features (map.data.forEach()), I have access to the data I uploaded, but not to the markers that were placed as a result of the import.
My question is if there is a direct way to access the marker from the feature.
I hope this is clearer now.
--- Update ---
I created a very simple jsfiddle for it:
http://jsfiddle.net/semmelbroesel/9bv68ngp/
This is the concept I want to achieve, and it works as is. My only question is if there is another way to achieve the same results by directly accessing the placed markers instead of using setStyle() to hide/show them.

You don't need to use forEach, since setStyle does already traverse the Features.
If you declare the styling function as:
map.data.setStyle(function(feature) {
var color = 'FF0000';
var symbol = '%E2%80%A2'; // dot
return /** #type {google.maps.Data.StyleOptions} */ {
visible: feature.getProperty('active'), // this links visibility to feature property
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=' + symbol + '|' + color
};
});
You don't need to call the method again, since the style gets bound to the feature property. Setting the active property to false will propagate to the marker style seamlessly.
After that, you can make your filters like (rough example)
var setFilter = function(property, value) {
map.data.forEach(function(feature) {
feature.setProperty('active', feature.getProperty(property) === value);
});
};
and calling for example setFilter('name','John');
Again, this is a rough example. I'd rather implement the filtering method on the google.maps.Data prototype, but this should point you in the right direction.

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

OpenLayers, nice marker clustering

Do you know how to have a nice clustering in OpenLayers such as this google example ?

You can add label to pointStyle in above example and explain context of this label.
Your code should be something like this:
var pointStyle = new OpenLayers.Style({
// ...
'label': "${label}",
// ...
}, {
context: {
// ...
label: function(feature) {
// clustered features count or blank if feature is not a cluster
return feature.cluster ? feature.cluster.length : "";
}
// ..
}
});
var styleMap = new OpenLayers.StyleMap({
'default': pointStyle,
});
var googleLikeLayer = new OpenLayers.Layer.Vector("GoogleLikeLayer", {
// ...
styleMap : styleMap,
// ...
});

Use OpenLayers.Strategy.Cluster for clustering.
Example Code
Working Example
Custom Styling
In-depth Explanation

I have just implemented a so called AnimatedCluster strategy for OpenLayers.
You can see a bit more about it at: http://www.acuriousanimal.com/2012/08/19/animated-marker-cluster-strategy-for-openlayers.html
It is only a firts version but adds a nice animation to the clusters. There are many things to improve but it is a starting point.

There's a great clustering example available in OpenLayers 3.
I created a jsFiddle from the code so you can play with it.
Basically you have to create an ol.source.Cluster with a grouping distance from an ol.source.Vector formed by an array of ol.Feature. Each ol.Feature created from your source coordinates in the form of ol.geom.Point.
var features = [
new ol.Feature(new ol.geom.Point([lon1, lat1])),
new ol.Feature(new ol.geom.Point([lon2, lat2])),
...
];
var cluster = new ol.source.Cluster({
distance: 50,
source: new ol.source.Vector({ features: features });
});
var map = new ol.Map({
layers: [
new ol.source.MapQuest({layer: 'sat'}), // Map
new ol.layer.Vector({ source: cluster }) // Clusters
],
renderer: 'canvas',
target: 'map'
});

you can do this with as igorti has said. the soltion is using OpenLayers.Strategy.Cluster class and styling your layer with OpenLayers.Style class...
for styling :
var pointStyle = new OpenLayers.Style({
'default': new OpenLayers.Style({
'pointRadius': '${radius}',
'externalGraphic': '${getgraph}'
....
},{
context:{
radius: function(feature){
return Math.min(feature.attributes.count,7)+3;
},{
getgraph : function(feature){
return 'ol/img/googlelike.png';
}}}};
it must helps you, more power to you!

Here is the JSfiddle for clustering based on custom attributes added to the layers. I struggled a bit with this so putting it here; Also shows creating a summary pie graph image when zoomed out with the clustered data http://jsfiddle.net/alexcpn/518p59k4/
Also created a small openlayer tutorial to explain this OpenLayers Advanced Clustering
var getClusterCount = function (feature) {
var clustercount = {};
var planningcount = 0;
var onaircount = 0;
var inerrorcount = 0;
for (var i = 0; i < feature.cluster.length; i++) {
if (feature.cluster[i].attributes.cluster) {
//THE MOST IMPORTANT LINE IS THE ONE BELOW, While clustering open layers removes the orginial feature layer with its own. So to get the attributes of the feature you have added add it to the openlayer created feature layer
feature.attributes.cluster = feature.cluster[i].attributes.cluster;
switch (feature.cluster[i].attributes.cluster) {
......
return clustercount;
};