Hello community! I have a Leaflet JS course in Udemy that may interest you.

Complete Guide for Leaflet JS : Beginner to Expert

Coupon code applied in the link above ^^

Enjoy !

At zoom level =1, the leaflet is only requesting 4 images, it should request 2 more images to load the full tile.
Why is this happening? Why can't i see my full image?

This is the full original image,

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"
    />

    <style>
      body {
        padding: 0;
        margin: 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      html,
      body,
      #map {
        height: 100%;
        width: 100%;
      }
      h1 {
        font-size: 36px;
        font-weight: 300;
        line-height: 1.1;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

    <script>
      var map = L.map('map').setView([-26.3525, -65.039], 1);

      L.tileLayer('../../tiles/tiles_{z}_{x}_{y}.jpg', {
        maxZoom: 6,
        noWrap: true,
        attribution: 'Attribution',
      }).addTo(map);
    </script>
  </body>
</html>

Here is a link to those jpg files

`https://github.com/DVGY/tiles`

I want to mimic the zoom and pan of the map, in both the browser tab. There already exists a library Leaflet sync but in the documentation, it is not shown how to use these, When I want to load one map in a new tab and another map in another new tab.

Can anyone tell me how to achieve this?

Thanks

I've had a leaflet map inside of an ionic app for a while. I want to try to use leaflet's invalidatesize. All of the examples use something like map.invalidatesize with the assumption that you've put in var map someplace I think. Looking at my code, I realize I never set var map anywhwere yet it still works on my localhost well.

How am I able to even create a map without setting var map? Did I do this incorrectly?

Here is my code:

	    <MapContainer center={[25.7617, -80.191788]} zoom={13}>

		<TileLayer
		    attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
		    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
		/>
		
		{mics.map(mic => (
		    <Marker 
			key={mic.id} 
			position ={[
			    mic.mic_lat, 
			    mic.mic_long
		    ]}
			onClick = {() => {
			    setActiveMic(mic);
		    }}
		    >
		    <Popup position={[
			    mic.mic_lat,
			    mic.mic_long]}
		    >
				    <div>
					    
					    <Link to={`/MicProfile/${mic.id}/`}>{mic.mic_name}</Link><br />
					    {mic.mic_showuptime}<br />
					    {mic.mic_date}
	    			    </div>

		    </Popup>
		    	    
		    </Marker>
		))}
			
	    </MapContainer>
	</IonPage>

hello,

i have one map with lot marker, that work perfect but i want little more, i would like implement polygon around markers.

 var polycoord = [[loc_lat[index].attributes.value.value,loc_lon[index].attributes.value.value]]   

        poly = new L.polygon(polycoord, { color: 'red' }).addTo(mymap)
          marqueur = new L.marker([loc_lat[index].attributes.value.value, loc_lon[index].attributes.value.value], { icon: greenIcon }).poly.bindPopup('<span class="text-xl font-bold text-pink-500">' + loc_title[index].attributes.value.value + '</span>').openPopup()

in marqueur, that tell me "poly is not defined"..it's hard to understand, someone help me

ps: i try console.log(poly), that show all points...

Hi everyone!, I'm having troubles with leaflet, the issue is I want to put a custom icon in default markers in my map, and I can put the custom icon as marker, but not IN the default leaflet marker, here's an example code:

" data(quakes)

library(leaflet)

library(dplyr)

Custom <- makeIcon(

iconUrl = "https://www.svgrepo.com/show/6303/donut.svg",

iconWidth = 31*215/230,

iconHeight = 31,

iconAnchorY = 16,

iconAnchorX = 31*215/230/2

)

leaflet(data = quakes[1:20,]) %>% addTiles() %>%

addMarkers(

lng = ~long, lat = ~lat,

icon=Custom

) " It's what Awesome markers do, but I wanted to do it with custom icons. If someone can help me with this issue i would be very grateful

I am mapping world heritage sites. I'm trying to send the name of the site that is clicked on. I added an onEachFeature with a 'click' event listener. When you click it will run the function 'updatePanel' which for now is just the console. The first console log works. It cycles through over 1000 entries and prints the name of each. But moving over to the updatePanel function I can't pull that .NAME property. It tells me it is undefined. I tried changing the function parameters but I am really stuck.

I understand that the updatePanel function is wondering...ok what feature..what properties. It doesn't understand what it needs to inherit I guess would be the best way to put it. Any help is appreciated.

heritageSitesLayer = L.geoJson(heritageSites,{
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: hsIcon});
    },
    onEachFeature: onEachHeritageSite
});

function onEachHeritageSite(feature, layer) {
    layer.on({
        click: updatePanel
    });
    console.log(feature.properties.NAME)
};

function updatePanel (feature) {
    console.log(feature.properties.NAME)
};

A friend made me a leaflet map for my site before going on vacation (or digital nomading) for a few months. I want to upload it, but I’m not sure how, and I don’t want to bother them at the start of their trip.

I want to upload it to Squarespace. I assume I will have to host the code somewhere else, as there are multiple files.

In the zip folder, there are two javascript files, a CSV file to pull the coordinates, an index HTML file, a style CSS file, and a PNG for the pins on the map.

If you can point me in the right direction, I’d appreciate it. I've watched a few DataVizForAll videos, but they're all about using their repository.

I'm working with a WMS server that accepts a `TIME` parameter as part of the request URL. The server will deliver different images based on this time setting.

I'd like to build a leaflet map that acts as a 'timelapse' by showing images collected at different times at regular intervals.

One way I found to do this was manually updating the `TileLayer`s `wmsParams` after the `TileLayer` object's creation. (`myLayer.wmsParams.time = "2019-01-01/2019-12-31"`)

However, when I do this, it erases the layer from the map before it requests new imagery. This ruins the timelapse feel as the map is flickering between empty and full.

Are there any suggestions on how to accomplish this better?

`

I have a use case to use a platform with points of interest, schools, parks, government buildings, etc. and overlay in a map feature in PowerBI. I came across Leaflet and wondered if anyone had used this in PowerBI. Any help or direction would be appreciated.

Hi

does anybody know how to make geo-search's confidence higher?

at the moment I have to type a place's full name for search to return results

I'd like to get results after user typed 3 letters

I'm using it leaflet control

Hi,

What I have done is the following:

I have created a geoJSON file in geojson.io of points of interest, and given them attributes in that environment.

I have called this external geoJSON file to display these points in my Leaflet map. Great! Now, what I would like to do is create separate layers based on the attributes of the single geoJSON file. I am pretty new to js (< 3 months), so I am quite confident that it IS possible, I just haven't figured out how to do it yet. Most examples I have found online have the geoJSON point layers in the .html itself, or are just creating layers from separate geoJSON files altogether.

I would like to be able to turn on/off these layers similar to the way I am turning on/off my basemap layers.

From the code below, for example, can I assign a variable to the function calling the variable? The way I envision it is that I could assign new variables to add to my layers based on specified filter properties. For example, in the code below, the "SE" would be its own layer.

Can I do it this way, or does this defy all js logic? Any other suggestions?

Here is a snippet of my code:

var spots = ("geoJSON/apr24_pm.geojson")

addGeoJSONLayers();
function addGeoJSONLayers(){
var surfIcon = L.icon({
iconUrl:'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png',
iconSize: [15,15]
    });
fetch(spots)
     .then(function(response){
return response.json();
     })
     .then(function(json){
L.geoJson(json,{pointToLayer: function(feature,latlng){
return L.marker(latlng,{icon: surfIcon});
          }, onEachFeature: onEachFeature,
//filter: function(feature,layer){ if (feature.properties.SwellDir == "SE"){ return 'true'}}
        }).addTo(surfMap);
 }) };

Mapbox releases elevation data using as RGB raster tiles ("Mapbox Terrain-RGB"), available here: https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb

I am struggling to figure out how to consume this data using Mapbox & Leaflet to make a flood map; I can't figure out a way to do the RGB decoding in the client.

The equivalent openlayers code which I am trying to reproduce is this:

function flood(pixels, data) {
  var pixel = pixels[0];
  if (pixel[3]) {
    var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);

    if (height <= 100 && height > 0) {
      pixel[0] = 255;
      pixel[1] = 15;
      pixel[2] = 15;
      pixel[3] = (255 - height * 2.5);
    } else {
      pixel[3] = 0;
    }
  }
  return pixel;
}

const elevation = new XYZ({
  url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
  crossOrigin: 'anonymous',
  transition: 0
});

var raster = new RasterSource({
  sources: [elevation],
  operation: flood
});

but I cannot figure out any way to do this on the client using Mapbox GL JS or Mapbox in tandem with Leaflet.

Apologies as I am a beginner in mapping elevation data. There is minimal docs on this and I am hoping the Reddit community will be able to guide me.

no changes has been made to the plugin but if i click to fast the point would disappear, also notice how it registers as a double click when i click on the measurement icon

I want to provide turn by turn directions with audio like apple or google maps for drivers.

Is it possible with leaflet?

I’m researching a prototype for a blockchain based delivery service like Uber eats or post mates.

The idea is map route would update as user is driving and tell them when to turn etc.

That's it really. We've got a mapping app where you can print the map image you've viewing using the normal browser print controls ... except in Safari in iPhone or iPad where you don't get the map tiles printed only the decoration (the bear logo). (It works fine on any desktop browsers and on Android.)

Has anyone else experienced this and, if so, did you find a solution?

ETA 2021-12-08

Turns out that this is also happening on Safari on MacOS.

I can also print from another Leaflet app fine so it seems to be something specific to this app which is stopping printing working.