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)
Related
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?
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'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!