Is it possible to order overlays within the layers control?
Here's my issue. When I do this with my overlays:
var overlays = {
"Apples": apples,
"Bananas": bananas,
"Peaches": peaches
};
L.control.layers(baseLayers, overlays).addTo(map);
Leaflet adds the overlays to the layer control on the map in a random fashion (due to iteration):
- Bananas
- Apples
- Peaches
Is it possible to specificy the order I want to show the overlays? *(In my case, I'd like to have it alphabetical. Also, I am using the Mapbox API)
Thank you.
I am not sure if Mapbox API has changed the default Layers Control code / behaviour, but the latter does not provide a 100% reliable way of displaying overlays in a specific order. See that post for details.
The explanation is that the Layers Control iterates overlays by their "stamp" (a unique identifying integer that is created using L.stamp(myLayer)). Depending on your type of layer, this stamp is assigned automatically but at different moments.
You can force its creation right after having instantiated your layer. For example in your case:
var apples = L.layerGroup();
L.stamp(apples);
var bananas = L.layerGroup();
L.stamp(bananas);
var peaches = L.layerGroup();
L.stamp(peaches);
Unfortunately the order of iteration is not guaranteed as per JS spec, hence the impossibility to have a 100% reliability in this behaviour.
That being said, in all browsers I have tested, the order is in accordance with the natural number order, so as of today, this trick works.
If you want more confidence, you should look for Control plugins that explicitly provide you with the functionality to specify manually the order of listing.
Related
I have two Shape Data rows for a Shape's ShapeSheet:
Shape Data Label Prompt Type Format Value Invisible
Prop.Type "Type" "" 4 "Alpha;Beta;Gamma;Delta;Epsilon;Zeta;Eta;Theta;Iota;Kappa" INDEX(4,Prop.Type.Format) False
Prop.Abbrev "Abbrev" No Formula 4 "A;B;G;D;E;Z;E;T;I;K" INDEX(4,Prop.Abbrev.Format) True
The way I intent to use this is to have the user select the Type, say Epsilon, and then have the Abbrev automatically switch to the corresponding value in the Prop.Abbrev.Format.
Note: the values used here are placeholders for the actual values for my application, which are not shown here so they don't distract from the real answer I need, how to keep the selections in sync when the first one is chosen or changed.
Thanks for any help you can give!
I don't have Visio on this machine, so I am unable to copy and paste a working solution. The approach gets a little complicated, but extremely flexible.
Save your lists in the User section, rather than Prop - this then becomes underlying data for use in properties. If you are using a master stencil then this also helps with managing the fields.
You can now store an index in your data as well - this index points to the appropriate values in your arrays. You can use Actions and side menus to set the index which, when referenced properly, means you can have the full name and/or abbreviation in the side menu and the ShapeSheet does all the work underneath.
The functions you want to look at are:
Index (e.g. INDEX(1,User.Type) will return "Beta". (0-based)
Lookup (e.g. LOOKUP("D", User.Abbrev) will return "3". (0-based)
GetAtRef
SetAtRef
SetAtRefExpr
SetF
I had a similar business problem which relied on setting a background colour based on the value of shape data. Your final solution could end up including formulas like this: =SETF(GetRef(Prop.Type),"GUARD(INDEX(LOOKUP(Prop.X,Prop.X.Format),User.Type))").
For more in-depth discussion - check out https://superuser.com/questions/1277331/fillforegnd-in-shapesheet-using-wrong-data and the extended discussion at http://visguy.com/vgforum/index.php?topic=8205.15 - the latter link also includes an example file with working shapesheets (well, working to the extent that they exposed my problem).
I have a layer called "Searched LayerX" having a vector tile source. I am having a simple requirement of highlighting a feature inside this "Searched LayerX" at runtime.
I was thinking of using the result of queryRenderedFeatures on "Searched LayerX" with the filter of unique ID of this particular feature and using this feature's geojson as a separate source to the new layer which I will be adding as "Selected LayerX".
var features = mapBox.queryRenderedFeatures({layers:['Searched LayerX'], filter : ["==",'gid','7818_2_CA']})
var selectedFeature = features[0];
Resultant feature set does not provide any geojson which I can use to create a new geojson source.
So my question is, how do I use the result as a different source to my "Selected LayerX"?
You can use the method described in the first link below - but understand that the returned feature is not the same as the source GeoJSON feature - it is the vector tile representation of that feature at that zoom level, which means it might be highly simplified.
https://gis.stackexchange.com/questions/186533/highlight-feature-with-click-in-mapbox-gl
Another method is to add another layer with the same source, and use the filter function for the highlight as shown in the two links below -
http://www.mapbox.com.s3-website-us-east-1.amazonaws.com/mapbox-gl-js/example/query-similar-features/
highlighting polyline features in mapbox-gl.js
Try this post, I have added the code which will let you have the features using querySourceFeatures() https://stackoverflow.com/a/66308173/9185662
We use the standard "layer control" from Leaflet. Instantiation is as follows:
this.controls[id] = L.control.layers({}, {}, {
collapsed: false
});
Layers are added dynamically and in random order (depending on when xhr requests complete). However it seems that leaflet implicity uses the _leaflet_id of the respective layer for ordering in the layer control and thus our layers appear in random order.
Is there any way to tell leaflet in which order it should display the layers in the control? E.g. by passing some additional parameter when calling the .addOverlay or .addBaseLayer methods?
Leaflet version is 1.0-dev
I found some hack-fix for the problem. However this is not a clean solution so feel free to post better answers.
Leaflet uses the _leaflet_id of the layer object for sorting. Thus the layer created first will always be on top. In order to sort the layers you will have to wrap the actual layer in a layer/feature group.
|- dummy layer group
|- some dummy geojson layer
|- your actual layer (will be added later)
Programatically:
var oFeatureGroup = L.featureGroup([
L.geoJson({
"type": "FeatureCollection",
"features": []
})
]);
Then we do some async loading and once we are ready we add the layer to the - more or less empty - layer group:
oFeatureGroup.addLayer(oMyMagicAsyncLoadedLayer)
We can then add the layer to the layer control and it will be sorted as "expected" where the order depends on the order of creation of the oFeatureGroup layers instead of the oMyMagicAsyncLoadedLayer.
I'm using Leaflet (v 0.7.7). It expects setting L_PREFER_CANVAS as a script tag, which is global. I wish to create 2 maps on same page, one with L_PREFER_CANVAS flag ON and once with OFF. How can I do that ?
1) I've tried setting window.L_PREFER_CANVAS before the map creation.
2) I've tried creating my layers with extended classes like this
var MyCircle = L.Circle.extend({
statics: {
CANVAS: true,
SVG: false
}
});
then using 'new MyCircle' instead of 'L.circle'.
Neither of the two methods have the desired effect, even though the map is rendered successfully
I'm looking into leaflet code but i'm not very comfortable with its inner workings yet, due to lack of js sorcery know-how i believe
Edit: A thing that partly works is cloning the entire leaflet source under a new object (M.* instead of L.), and keep my desired flag enabled for it. But its clumsy and breaks with plugins which add their functionality to L. classes. Thereby requiring more duplication to fix, which i'm trying to avoid
Would recommend you look into migrating onto Leaflet 1.0, where preferCanvas is now a traditional option inside the map constructor...Among many other significant improvements.
http://leafletjs.com/reference-1.0.0.html#map-prefercanvas
Here's a brief description of what I'd like to do (and I'm very, very new to this but seem to have hit a wall):
Display a map of color-coded buildings based on a custom tag (miamioh_lds).
What I've tried: in Mapbox Studio Classic starting with the Emerald style (coordinates 84.7286, 39.5033)
#building [miamioh_lds="uitcp"] {
polygon-fill: #f61313;
}
I would expect Hoyt Hall to be red, but it is not, even if I remove all other #building CartoCSS statements.
I would like the building filled, which is why I'm using tags and fill instead of using a data source, which seems to be focused at adding markers. I'm using Mapbox because my goal is to bring the map into Tableau (which I'll use to add a marker off dynamic data, which is why I need a fill, not a marker here).
Can I use custom tags in CartoCSS? If so, what am I doing wrong?
Thanks!