How to Change the Default Loading Tile Color in Leafletjs

How can I change the default loading tile color in LeafletJS?

It's controlled by the below css rule in the file 'leaflet.css':

.leaflet-container {
    background: #ddd;
}

so you just need to change this rule.

How can I fill color the tile leaflet?

There are a few approaches to this problem:

• Search for a different tile provider which serves the desired colour scheme
• Serve your own tiles after creating your own rendering style
• Change the saturation of the tiles on the client side using 2d canvas
• Substitute colours in the tiles on the client side using 2d canvas
• Apply CSS colour filters to the tiles (by specifying a CSS class name for the tilelayer)
• Change the saturation and substitute colours in the tiles on the client side using WebGL

The map at coinmap.org (the site mentioned in the question) uses a CSS filter (filter:saturate(4)) on all the tiles (on the CSS selector .map .leaflet-tile-pane)

Leaflet - change map color

The easiest way would be do this by adding them as Polygons by Leaflet's L.GeoJSON. First you would need to find a proper dataset of the world's boundaries. I found one here: https://github.com/johan/world.geo.json Save the world.geo.json file so you can use it one your own server. Now initialize a simple map:

var map = L.map('map', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © OpenStreetMap contributors'
        })
    ]
});

Fetch the GeoJSON file using your favorite XHR library (i'm using jQuery in this example) and then use the data to initialize a GeoJSON layer, and do some styling:

$.getJSON('world.geo.json', function (geojson) { // load file
    L.geoJson(geojson, { // initialize layer with data
        style: function (feature) { // Style option
            return {
                'weight': 1,
                'color': 'black',
                'fillColor': 'yellow'
            }
        }
    }).addTo(map); // Add layer to map
});

That's it, can't make it any simpler. Here's a working example on Plunker:

http://plnkr.co/edit/UGQ9xt?p=preview

(note that i load the GeoJSON file directly via Gitraw/Github, but you're not supposed to do that in a production site)

And here's the reference for L.GeoJSON:

http://leafletjs.com/reference.html#geojson

Edit: Other options are more complicated but do not have some of the drawbacks you mentioned in the comments, here are the best i can think of:

Using a combination of Leaflet and the awesome D3 library by Mike Bostock. Here's a quick example: http://bost.ocks.org/mike/leaflet/ It doesn't suffer from the redraw on pan but it's harder to grasp.

Another solution is using Mapbox They have a tool called TileMill which allows you to generate your own tilesets. That would be the perfect solution, it wouldn't have any of the mentioned drawbacks and you can style almost everything. Only drawback is that you'll need to host to tiles yourself.

Leafletjs: Dynamically changing map feature colors

By default Leaflet can render only raster tiles (i.e. plain images, which you cannot easily modify) and vector shapes (typically from GeoJSON data).

If you want to modify the tiles rendering, you have mainly 3 options:

• Download OSM data and re-render the tiles (i.e. create your own tile server) using your own styling. OSM wiki should have some pages that explain how to do so.
• Use an online service that offers tiles rendering with custom style (e.g. Mapbox).
• Use Leaflet.VectorGrid plugin with downloaded vector data from OSM and providing your own styling.

If you want to be able to modify the rendering at runtime, then only the 3rd option would be appropriate.

Update/Reload specific tile in leaflet dynamicly

First, listen to the tileload and tileunload events of the L.TileLayer to grab references to tiles as they load (and free those references as they unload), e.g.

let myTileLayer = L.tileLayer(...);

let tileRefs = {};

myTileLayer.on('tileload', function(ev) {
   tileRefs[ ev.coords.x + ',' + ev.coords.y ] = ev.tile;
});
myTileLayer.on('tileunload', function(ev) {
   delete tileRefs[ ev.coords.x + ',' + ev.coords.y ];
});

...so whenever you want to update a tile, you just have to search for it in the data structure.

Remember that in order to reload a HTMLImageElement, you've got to change its src property, e.g.:

function ReloadTile(x,y){
   const tile = tileRefs[x + ',' + y];
   if (!tile) {
      // Tile is not currently loaded on the screen
      return;
   }
   tile.src = "/chunks/{1}.{1}.png";
}

Beware of requesting a URL that your browser has cached. Do your homework regarding cache busting and relevant HTTP headers.

Note that I'm using a javascript Object as key-value data structure, and string concatenation to build up a unique key per tile. You're free to use other data structures (such a Map) and any other method to index the tiles (such as a double-depth data structure for x-y, or triple-depth for x-y-z, or indexing by tile URL). Also note that the sample code is usign only the X and Y coordinates of the tile since your TileLayer seems to have only one zoom level.

---

Related Topics