When I call L.geoJSON(oporto) with https://3mapslab.github.io/Leaflet.streetlabels/demo/oporto.js I see the FeatureCollection on the map as https://jsfiddle.net/aejmdon7/ shows.
When I call L.geoJson(county) with https://www.terrafrost.com/leaflet/091-2.js I see the Polygon on the map as https://jsfiddle.net/aejmdon7/2/ shows. BUT when I try to wrap the Polygon type into a FeatureCollection it doesn't work. https://www.terrafrost.com/leaflet/091.js is my attempt to wrap it in a FeatureCollection and https://jsfiddle.net/aejmdon7/3/ shows it not not showing anything on the map.
Here's the diff between the two of them (diff 091.js 091-2.js):
1d0
< {"type":"FeatureCollection","name":"Counties","features":{"type":"Feature","properties":{"name":"Comal","show_on_map":true},"geometry":
3d1
< }}
So why does 091-2.js display a Polygon whereas 091.js doesn't? Clearly Leaflet supports FeatureCollections because the first JS Fiddle link makes use of them. So the fact that 091-2.js is wrapped in a FeatureCollections tag doesn't seem like that'd be the source of the problem so what is? Why is https://jsfiddle.net/aejmdon7/3/ not showing anything?
Related
I'm trying to create an interactive map out of an image using Folium as part of a Django project in which I want to display the generated HTML on a website.
I want to be able to see only the image upon which I place markers etc., not the actual world map that is by default created.
The image is a map of a fantasy world.
I found this tutorial and tried to apply it to Folium and that generally worked. I'm essentially adding an Image Overlay with "my" map to a map-object. However, that does not remove the original real-world map, meaning when I then save this map, it still also displays a world map that I do not care about in the lower left corner attached to my image overlay.
import folium
def create_aldrune_map():
base_map = folium.Map(crs='Simple', zoom_start=4)
aldrune_overlay = folium.raster_layers.ImageOverlay(
image='Path/To/Image',
bounds=[[0, 0], [1000, 1300]],
zindex=1)
aldrune_overlay.add_to(base_map)
base_map.fit_bounds(bounds=[[0, 0], [1000, 1300]])
base_map.save('Path/To/Output')
How do I get rid of the real-world map?
Let me quote from the Folium documentation, emphasis mine:
class folium.folium.Map(location=None, width='100%', height='100%', left='0%', top='0%', position='relative', tiles='OpenStreetMap',
(snip)
, **kwargs)
Parameters
tiles (str, default 'OpenStreetMap') – Map tileset to use. Can choose from a list of built-in tiles, pass a custom URL or pass None to create a map without tiles. For more advanced tile layer options, use the TileLayer class.
Therefore you probably want something like:
base_map = folium.Map(crs='Simple', zoom_start=4, tiles=None)
I'm using this plugin https://github.com/lwsu/leaflet-polygon-fillPattern to fill my geojson polygons with .png pattern.
It works great when I use the basic syntax, i.e :
L.polygon(poly1, {fill:'url(image.gif)'}).addTo(map);
But I'd like to grab value from geojson properties to change the fill pattern.
so far, i'm using this syntax where pattern value is stored in
feature.properties.PolygonFill
I tied this syntax :
L.polygon(poly1, {
fill:'url('+feature.properties.PolygonFill+')'
}).addTo(map);
But returned value is null and no image is displayed.
Any idea of what is wrong ?
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
I try to use leaflet labels and on several pages it is successful. I wanted to use the same approach to display labels on another page and it responded with an obscure technical message which I did not understand:
Uncaught TypeError: Cannot read property 'call' of undefined
at e.whenReady (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.showLabel (leaflet.label-src.js:538)
at e.showLabel (leaflet.label-src.js:287)
at e._onMarkerAdd (leaflet.label-src.js:383)
at e.fire (leaflet.js:5)
at e._layerAdd (leaflet.js:6)
at e.whenReady (leaflet.js:6)
at e.addLayer (leaflet.js:6)
at e.onAdd (leaflet.js:7)
After a lot of researching I found out that leaflet.label is deprecated for Leaflet 1.0.3, which makes sense, since we are using older leaflet version in other pages where the labels appear correctly, but on the newer leaflet versions it crashes the map. The docs say that I should use bindTooltip instead of bindLabel, but I do not know how. I have tried to call it with some content on a marker but it did not appear on the map and I did not find it in the generated structure.
So, my question is as follows: How can I use labels with Leaflet 1.0.3, which will be bound to a marker and will adjust in case of translation/zoom?
The Tooltip is indeed now directly part of Leaflet main library.
Note that it appears only on mouseover by default, but you can use the permanent option to have it remain always visible.
marker.bindTooltip("Some tooltip content", {
permanent: true
});
Example: http://playground-leaflet.rhcloud.com/tiqo/1/edit?html,output
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!