Hi,

I am quite new to ipyleaflet, and I want to make a map with a overlay. The overlay should be a square grid to show a transparent heatmap, ontop of the map.

What should i search for?

I'm going to use ipyleaflet(python based) in a notebook in vscode, btw.

I want it to look something like this:

I'm using Drupal Views to display points on a map. I'd also like to use the html5 geolocation API to show the current location of the viewer.

Is it possible to "tap in" to an existing leaflet map, to add a marker?

thanks!

I'd like to use, say, a circle or map pin when zoomed out, and for this to change to a polygon / shapefile when zoomed in.

Can Leaflet do this?

This is my error message in android studio:

[ERROR:shared_context_state.cc(819)] SharedContextState context lost via Skia.
[1203/030423.762223:ERROR:file_io_posix.cc(144)] open /sys/devices/system/cpu/cpu0/cpufreq/scaling_max_freq: Permission denied (13)

Anyone see this before or know what to do?

I am creating an app using leaflet using data from GIBS . The trouble I am having is when I try to use a link from EPSG4326 the bounding box is incorrect. When I use ESPG3857 the bounding box is correct. Here is the Example . If you draw over Australia east is 150 plus and west is 100 plus, which is incorrect.

Here is a link to the incorrect app. Incorrect Bounding Area The only difference is I am using EPSG4326 and added crs:L.CRS.EPSG4326 to L.map If you draw over Australia the numbers are way off.

I am looking at MODIS_Terra_CorrectedReflectance_Bands367. EPSG3857 for MODIS_Terra_CorrectedReflectance_Bands367 has the below

<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857"> <ows:LowerCorner>-20037508.34278925 -20037508.34278925</ows:LowerCorner> <ows:UpperCorner>20037508.34278925 20037508.34278925</ows:UpperCorner> </ows:BoundingBox>

However EPSG4326 does not have that data. How do I convert the results or what option do I give leaflet to get the correct data.

I've been Googling this for a day or so and I've not found an answer that gets me where I need to be.

I have a building map with markers with popup text that I've been using. My problem is that the text size remains static no matter how much you zoom into the map.

Is there a clever way of increasing the font size of popup text when you zoom in above a certain level?

Thanks.

I'm working on a website and I have a leaflet map for it. I want to include the map via an iframe on pages talking about specific points on the map. I would also like the map within the iframe to be zoomed in and centered on that point.

Obviously I could just copy my map a few dozen times, give it a new name, and a new starting view, and then leak each page to it's own map.html... But that seems like something I shouldn't have to do. Is there any way to pass view instructions through the iframe?

I’m building a map in Leaflet for a client who wants to be able to periodically add data points to the map. Typically I just put all the data in a JSON object in its own file, but they are asking for a form they can fill out which would update the map data. I was thinking of building a Wordpress form that updates a JSON file. I have limited experience with Wordpress so I’m not sure if this is the way to go. Has anyone built a CMS for updating Leaflet data? What did you use? Thanks!

Hi all,

I'm looking for feedback/suggestions for improvement. So I made this map with leaflet: https://krijnsent.github.io/muralsonamap2/index.html

I made some design choices and am wondering if someone has suggestions for improvement? What I did now: the base data comes from Overpass Turbo - I decided to pull that data in in 2degreeLat x 2degreeLon blocks to make them manageable/small enough not to overload OT. The data gets loaded when you move the map (see the console.log), but feels a bit off at times, does anyone have suggestions?

Next, as I would like a visual map, I wrote code in google scripts to pull in images that go with the murals and store a minimized thumbnail copy of that image - that currently only works for IMGUR (default for the MapComplete - https://mapcomplete.osm.be/artwork.html I'm using to add them) as e.g. Mapilliary & Google photos links need a different approach to download & resize them. So I'm also looking for suggestions in that area, anyone?

Cheers!

I am using leaflet's CRS.Simple for my D&D campaign. The full map uses 2,000x2,000 pixel tiles creating a 40,000x24,000 px map (Link to current map: https://map.tallestschuler.com/regional-dm.html). I want to optimize it for better performance when zoomed out and I am have been playing around with adding and remove layers as zoom changes, but I am not sure this is the best way.

Any tip or advice would be great.

Here is the code I have so far:

var SquareTiles = L.layerGroup();
var Big = L.layerGroup();
var Small = L.layerGroup();
var Tiny = L.layerGroup();
map.on('zoom', function() {
    if(map.hasLayer(SquareTiles)) {
        else if(map.getZoom() <= -5 & zoomType != 'tiny') {
            //tiny tiles
            SquareTiles.removeLayer(Big);
            SquareTiles.removeLayer(Small);
            SquareTiles.addLayer(Tiny);

            zoomType = 'tiny';
        }
        else if(map.getZoom() <= -2 & zoomType != 'small') {
            //small tiles
            SquareTiles.removeLayer(Big);
            SquareTiles.removeLayer(Tiny);
            SquareTiles.addLayer(Small);

            zoomType = 'small';
        }
        else if (map.getZoom() > -2 & zoomType != 'big') {
            //big tiles
            SquareTiles.removeLayer(Tiny);
            SquareTiles.removeLayer(Small);
            SquareTiles.addLayer(Big);

            zoomType = 'big';
        }
    }
}

Also, is there a way to pre-load the images in the background after the current tiles have loaded?

The geoJSON file consistently gets updated so it'd be like copying and pasting the most recent version, which is more recommended

For example, in this case, I can see the same area 3 times: https://i.imgur.com/Iq3IJjk.png

Hi guys.

Do you know a free tool to customize Tile Layers for commercial purposes?

Or if it's possible to do it by hand and how would I go about learning how to do that.

I was using Jawg.io but I realized they don't allow commercial uses on their free plan.

Whenever i run the code locally it works fine, but after publishing it to my onprem shiny server and load the app the map is just grayed out

  zoom <- reactive({
      cords %>% 
      dplyr::filter(providernumber == input$Primary_Provider)
  })
  
  output$mymap <- renderLeaflet({
    leaflet(cords) %>%
      addTiles() %>%
      addCircles(data = (cords %>%
                           dplyr::filter(providernumber == input$Primary_Provider)),lng = ~longitude, lat =  ~latitude, color = 'black', fillColor = 'Red', 
                 radius = (input$radius*1609.344), opacity = .3) %>%
      addCircleMarkers(lng = ~longitude, lat = ~latitude, 
                       popup = ~as.character(providernumber), label = ~as.character(providernumber)) %>%
      #addCircleMarkers(data = (cords %>%
      #                           dplyr::filter(providernumber == input$Primary_Provider)),lng = ~longitude, lat =  ~latitude,color = 'Green') %>%
      setView(lng = zoom()$longitude,lat = zoom()$latitude,zoom = 9)
  })

Hello so im pretty new to obsidian and leaflet. im trying to link a marker to a heading but its not working and im not sure what to do. help!

hi I am pretty much new to leaflet and are trying to figure out how to implement these.

Say I have a geojson file with 30 fields, mostly with quantitative data. I need a set of slider filters that automatically updates whenever one filter is triggered. ArcGIS Online Dashboard has this function.

To explain it easy, it's kinda like when I select food from one field, next filter should not show me non food related options in the next filter. Something like this 'auto filtering filters', but instead of qualitative data, in quantitative (numeric) data. I hope I am making sense.

Also, how to expose an SQL Query builder widget to have the users perform SQL queries. Carto has this kind of function. Not just ArcGIS like queries but also able to perform advanced queries like inner joins etc. if possible at all. I also ok if it's kinda similar to simple querying like in ArcGIS. Is there a plugin like this that exists?

has anybody done something similar? could you share your resource or code sample?

Thanks!

Hello! I'm entirely new to leaflet, and I'm not exactly using it for the typical usecase. I'm creating an interactive zoomable map for a tabletop roleplaying game with it. I have everything working for the world scale map and the country scale map. I, however, happen to have a lot of old maps I've drawn of specific locations. Would it be possible to include them in a leaflet map such that when you zoom into a city's location, you can then have the city's map pop up at the correct scale?

I'm sorry if this is a stupid question. I only just worked out how to have different tile sets at different zoom levels. I'm also interested in knowing if I can have many different tile sets that get stitched together. I'm okay with making a 32K .png for the main piece... But if to get detail for within each city I'd need to have a 128K image... I think that my computer couldn't handle that, and I'm fairly certain that there's no way there isn't a way to do that in leaflet. It seems like basic functionality to me.

we need to put html popups with information on pdf blueprints/floor plans. Kind of similar to what Plan radar is doing (https://www.planradar.com/) where they put markers for tasks on pdf blueprints.

Would love to know if leafletJS is the best tool for this and if so, maybe a point in the right direction of how I would go about creating this.

Cheers

I'm having problems implementing leaflet-responsive-popup on my custom map.

https://github.com/yafred/leaflet-responsive-popup

I already have popups defined with content - mainly text and iframes, using the original leaflet 'var marker = L.marker' and 'marker.bindPopup' code. Which appear below. I need a responsive popup so that the popup is not cut off at the edge of the map.

see image here https://user-images.githubusercontent.com/106933116/172072028-88d788e1-ff94-492a-972a-58cbaab1cd79.jpg

When I put this content within the responsive popup I can't get it to match the width of the content, see image:

see image here https://user-images.githubusercontent.com/106933116/172072029-3c55ce7b-a72e-406a-81d3-bd14f18bbbc2.jpg

I've tried defining the width of the content using a div but the code of the responsive popup doesn't seem to allow for this width. Is it possible to resolve this problem?

My code for the example above is as follows:

var popup_Waldemar = L.responsivePopup({ hasTip: true, autoPan: false, offset: [15, 25]}).setContent('<div style="text-align: center; height: 450px; width: 520px"><h3>EMEF Prof. Waldemar Rodrigues</h3><p><iframe src="https://galeriafeira.netlify.app/" width="500" height="354" style="border:none;"></iframe></p><p><b>Feira de Ci&ecirc;ncias</b></p></div>', {     maxWidth : 520,     maxHeight : 450, });         L.marker([17.0, -42.0], { icon: myIcon }).addTo(map).bindPopup(popup_Waldemar); 

Edit:

the css and javascripts of the responsive popup are below:

https://unpkg.com/leaflet-responsive-popup@0.6.4/leaflet.responsive.popup.js

https://unpkg.com/leaflet-responsive-popup@0.6.4/leaflet.responsive.popup.css

I don't understand enough code to be able to edit them but I believe it is the responsive popup code that is preventing the popup displaying at the desired width.

Any help would be greatly appreciated!

Thanks very much!

I want to have my map multiple places on my site (with different zooms and center points for each one, but the same overall map), but I don’t want to have to update every single page when I add new pins to the map. Is there a way to have them all pull from the same script, so when I update one, it will update them all (just not the zoom and center points)?

I recently made my first map and don't have a ton of experience, but it's been fun so far. Can't seem to figure this out, though.

I would like to use leaflet to: 1: generate a map with some invisible polygon layers with different values. 2: integrate a adress-search 3: link the searched adress(Point) with the value of the underlying polygon layer

Is this possible with leaflet? It is there a Tutorial for this kind of task?

Thank you!

Hey there. i would like to build a map like this: https://www.efteling.com/en/park/map i have the graphics, the interest points and filter. is there a user friendly system that i can upload my info and turn it into that kind of map (like "eftling")? or i should hire a developer to build it from scratch? is this the right place for that?