As a newcomer to javascript and the use of leaflet I'm unsure which subject this should be.
Using the Layer Groups and Layers Control example as a model I wish to assign the Control text to the overlays from a variable.
Inserting the variable name simply uses that as text.
Code I've used follows.
var cities_title_0="cities(N-S)"
var cities_title_1="cities(E-W)"
var overlays = {cities_title_0: cities_layer[0],cities_title_1: cities_layer[1] };
L.control.layers(null,overlays).addTo(map);
How can I get the value of the variable in the control and not it's name please?
Previously (<= ES5) you would have to proceed in 2 steps:
Initialize the object var overlays = {}
Assign your computed key: overlays[cities_title_0] = cities_layer[0]
One way is to put the variable name in [] - eg
var cities_title_0="cities(N-S)"
var cities_title_1="cities(E-W)"
var overlays = {[cities_title_0]: cities_layer[0], [cities_title_1]: cities_layer[1] };
L.control.layers(null,overlays).addTo(map);
Related
I have created a leaflet map to display some data and now want to add a 'filter' to my map. I am using the grouped layer control plugin and have an issue which I cannot quite solve. For example I have 2 (or more) conditions which decide whether or not to show the marker and right now it works more like a OR filter, but i want a AND filter so that both (or more) conditions need to be checked in the overlay in order for the marker to be shown. If you have an idea or know about a post which already covered this issue, please let me know.
Code:
var berlin_1 = L.marker([52.48937,13.50341]).addTo(map);
//grouping
var A = L.layerGroup([berlin_1]);
var B = L.layerGroup ([berlin_1]);
//overlay
var groupedOverlays = {
"(headline1)": {
"condition 1": A,},
"(headline2)":{
"condition 2": B}};
L.control.groupedLayers(null, groupedOverlays).addTo(map);
I am making a game map with different layer groups. Everything works fine, but is it possible to add a class to the Layer groups as shown below?
The reason why is because I would like for example to place the second layer group on top of the first layer group. I know it is possible to add a class and then changing the z-index, but I have no idea how to do this.
This is how I have set up the Layer groups currently.
// Layer Groups
var lg_locat = L.layerGroup([locat_001, locat_002, locat_003,
locat_004]).addTo(map);
var lg_quests = L.layerGroup([quest_001, quest_002, quest_003,
quest_004, quest_005, quest_006, quest_007]).addTo(map);
var lg_noticeboards = L.layerGroup([noticeboard_001,
noticeboard_002, noticeboard_003]).addTo(map);
var lg_treasures = L.layerGroup([treasure_001, treasure_002,
treasure_003, treasure_004, treasure_005]).addTo(map);
Example of the map: http://www.droogjeproductions.nl/leaflet-map-test/index.html
You can call the setZIndex() method on the layer groupe which is setting the z-index of each layer of the layer group
For exemple if lg_noticeboards are above quests which are above treasures which are above locat :
var lg_locat = L.layerGroup([locat_001, locat_002, locat_003,
locat_004]).addTo(map).setZIndex(1);
var lg_quests = L.layerGroup([quest_001, quest_002, quest_003,
quest_004, quest_005, quest_006, quest_007]).addTo(map).setZIndex(3);
var lg_noticeboards = L.layerGroup([noticeboard_001,
noticeboard_002, noticeboard_003]).addTo(map).setZIndex(4);
var lg_treasures = L.layerGroup([treasure_001, treasure_002,
treasure_003, treasure_004, treasure_005]).addTo(map).setZIndex(2);
Something like that may work I think, if it doesn't try this:
lg_locat.setZIndex(1);
lg_quests.setZIndex(3);
lg_noticeboards.setZIndex(4);
lg_treasures.setZIndex(2);
I'm new to leaflet and am trying to implement a set of markers with different CSS-styles.
So, I am aware that after adding a marker to a map I can access different CSS-attributes by calling getElement() on my marker for example:
marker.addTo(map);
marker.getElement().style.borderColor = '#000';
This works just fine, but when adding a marker to a layer, this can no longer be used since a TypeError occurs (getElement() is undefined). Here is the example code where the error occurs:
myLayer.addLayer(marker);
marker.getElement().style.borderColor = '#000';
Am I overlooking a simpler way to set CSS-Attributes for markers and divicons that are added to layers or is there a similar way to access layer-added markers and divicons in JavaScript?
So I found a solution that is working for me.
The idea is to extend the function that is used to create the icon.
Last answer here github.com/Leaflet/Leaflet/issues/5231 helped a lot.
var borderSize = ...;
L.DivIcon.Custom = L.DivIcon.extend({
createIcon: function(oldIcon) {
var icon = L.DivIcon.prototype.createIcon.call(this, oldIcon);
icon.style.borderSize = borderSize;
...
return icon;
}
})
var icon = new L.DivIcon.Custom({
...
});
var ll = L.latLng(entry.Longitude, entry.Latitude);
var marker = L.marker(ll, {
icon: icon
})
this.myLayer.addLayer(marker);
Welcome to SO!
When not added onto a map (since your parent myLayer may not be added to the map itself), a marker does not have any element.
If you do not need to change too many styles individually and dynamically, you might rather use the className option of your Icon / DivIcon.
I am trying to update the content of a Sap.m.List control. It keeps holding the same Model, but the binding path for that model changes.
Is there any function which I could use to update my Sap.m.List to display the data inside a new binding path?
I tried using oList.getModel().setPath() and after that a refresh of the model, but this did not change the content of the list.
Thanks in advance for any advice on this!
you need to set the binding context, you can get a new context via the path
var oModel = oList.getBindingContext().getModel();
var oContext = oModel.getContext(sPath);
oList.setBindingContext(oContext);
Change the Element bound to as follows:
var sPath = "<your new path>";
oList.bindElement(sPath);
if you need a handle to your list
var oList = this.getView().byId("<your-list-id>");
Hope this helps.
I am working with mapbox.js and I am trying to reset a layer that I removed, but stored in a variable. I have created a map object and attached it to a div and stored it as the variable map. I initialize the layers like so
var myLayer = L.mapbox.featureLayer().addTo(map);
var secondLayer = L.mapbox.featureLayer().addTo(map);
Then I store them in a json object
var geoJsons = {"myLayer": myLayer,
"secondLayer": secondLayer
};
in a function below, I have an onclick function which draws on the data attribute of the object clicked to point to the specific layer in the json object.
var layer = $(this).data('layer');
map.removeLayer(geoJsons[layer]);
I then try to re-add it on the click of a different button
geoJsons[layer] = L.mapbox.featureLayer().addTo(map);
This last bit does not work. My question is, is there a way to re-add the layer to the map by calling it from within this json object?
geoJsons[layer] = L.mapbox.featureLayer().addTo(map);
What you are doing here is overwriting the layerobject stored with a new instance of L.mapbox.featureLayer. The stored layer is accessible via geoJsons[layer] (Assuming the layer variable holds the string myLayer or secondLayer) you can add it by simply calling it's addTo method like so:
geoJsons[layer].addTo(map);
//or
map.addLayer(geoJsons[layer]);