Develop Reference

Place tiles in leaflet map

I use leafletjs to make a interactive map. I have a fixed list of URLs to use and I can not change the URLs.
I want to make a map with those tiles always in the same place and in the place I want them to be.
Tile0 is in (0, 0)
Tile1 is in (0, 1)
and so on. How do I decide where each tile goes?
var i = 0;
L.TileLayer.CustomUrlLayer = L.TileLayer.extend({
getTileUrl: function(coords) {
var x = i;
var y = i;
i = i + 1;
return `https://example.com/${y}-${x}.png`;
}
});
L.tileLayer.myLayer = function(templateUrl, options) {
return new L.TileLayer.MyLayer(templateUrl, options);
}
var map = L.map('map').setView([0, 0], 18);
L.tileLayer.myLayer('', {
attribution: 'My Map',
maxZoom: 18,
noWrap: true,
tileSize: 256,
}).addTo(map);
This snippet show my current leafletjs map. The tiles are placed wherever and it depends on the screen size. It changes if my Google Chrome window is smaller and so on. The correct images are loaded.
Tile0 Tile1 Tile2 Tile3
Tile4 Tile5 Tile6 Tile7
...
always regardless of the screen. How?

Changing the coordinate system on my leaflet map to custom (scale and 0,0 position)

I'm building a custom tilelayer map for a game. There is a current build-in coordinate system in the game and I'm looking to replicate it for ease of user access in finding coordinates and hooking into a database of locations.
I am trying to move the 0,0 of the CRS to a center location of the map however everything I have tried it is always in the top-left.
Is there a way to shift the tilelayer after it is added to the map?
Also, how would I go about changing the scale of the coordinates?
I have been trying to search quite a while for a solution but have come up with nothing that fits what I'm looking for. I've tried the https://leafletjs.com/examples/crs-simple/crs-simple.html however unless I'm missing something, it's not helping me with this.
Here is an example: Blue lines are the current coordinate system, and red would be an example of where I would like it to be. example of my problem
Here is where I initialize my map and tile layer.
var map = new L.Map('map', {
crs: L.CRS.Simple,
zoom: 3,
center:(hash),
minZoom: 2,
zoomControl: false,
noWrap: true, });
var TopoLayer = L.tileLayer('map-tiles/{z}/{x}/{y}.jpg').addTo(map);
Thank you, I feel like the solution is so simple that I am just skipping over it.

var factorx = 8
var factory = 8
L.CRS.pr = L.extend({}, L.CRS.Simple, {
projection: L.Projection.LonLat,
transformation: new L.Transformation(factorx, 160, -factory, 52.9),
scale: function(zoom) {
return Math.pow(2, zoom);
},
zoom: function(scale) {
return Math.log(scale) / Math.LN2;
},
distance: function(latlng1, latlng2) {
var dx = latlng2.lng - latlng1.lng,
dy = latlng2.lat - latlng1.lat;
return Math.sqrt(dx * dx + dy * dy);
},
infinite: true
});
This seemed to do the trick :) Created a custom crs.

Color bar does not get displayed on top of my map (leaflet using d3)

I am trying to display a color bar (it is a legend for my map layers). I am doing this by combining d3 and leaflet. Here is my current implementation.
var map = L.map('map', {
center: [19.2436590371, 96.8861699425],
zoom: 9,
minZoom: 4,
maxZoom: 9,
layers: [osm, lyr1] // These are some generated layers
});
// Add tile layers for my map ....
let svg = d3.select(map.getPanes().overlayPane).append('svg').attr('id', 'svg');
length = 100;
color = d3.scaleLinear().domain([1, length])
.interpolate(d3.interpolateHcl)
.range([d3.rgb("#007AFF"), d3.rgb('#FFF500')]);
for (var i = 0; i < length; i++) {
svg.append('div').attr('style', function (d) {
return 'background-color: ' + color(i);
});
}
The problem is that nothing get displayed on top of leaflet maps. Has anybody a solution for this ? Thanks for you help.

How to map leaflet heat-map layer points with tile-layer points

I've non-map images like floor images.
By using Leaflet image-Overlay I load these images, And with the help of Leaflet-heat plugin I generate heat-map layer on that image.
But heat-map positions and coordinates of image are mismatched.
please help me to solve this problem.
My Output image:My Output
Black dots in yellow box of the image are the points where i have to generate the heat-map.
I mentioned the coordinates of these points below.
var imgDimensions={width:1713, height:1625};
var map = L.map('map',{
maxZoom: 0,
minZoom: 0,
crs:L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2],0);
var imageUrl = "D:/Jithu/LeafLet/images/Floor1.png";
var imageBounds = [
[imgDimensions.width , 0],
[0, imgDimensions.height]
];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
addressPoints = addressPoints.map(function (p) {
var contPoint = map.layerPointToContainerPoint(L.point(p[0],p[1]));
var latlong = map.layerPointToLatLng(layerPoint);
return [latlong.lat,latlong.lng,p[2]];
});
var heat = L.heatLayer(addressPoints, {
minOpacity:0.0,
max:1.0,
radius: 10,
gradient:{
0.4: 'blue',
0.65: 'lime',
1: 'red'
}
}).addTo(map);
// addressPoints.js
//[X-cord, Y-cord, Intensity]
var addressPoints = [
[637, 383, 1],
[724, 397, 0.5],
[682, 444, 0.5],
[714, 515, 1],
[589, 500, 1]
];
<div id="map" style="width: 1713px;height: 1625px"></div>

Google Maps with satellite base Map and imageMapType overlay increase zoom

I am displaying an ImageMapType as overlay over a satellite mapType base map.
The base map seems to be limiting the max zoom to 19 in my area, if I change to a Road mapType I get a a couple of more levels. I have high resolution imaginery which I am displaying in the overlay and I want to be able to zoom further. If I use the ImageMapType as base map I can zoom in all I need, but I would really like to display the satellite base map and then continue to zoom into the image even if there's no satellite imaginery available.
Is there any way of accomplishing this? The only thing I can think of is creating a custom base map.
Code is similar to this example https://developers.google.com/maps/documentation/javascript/examples/maptype-image-overlay
Thanks!
My code:
var mapMinZoom = 10;
var mapMaxZoom = 25;
var zoom = 20;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-34.567426059726316, -60.34467143006623),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: false,
streetViewControl: false,
maxZoom: mapMaxZoom
});
createImageLayer('imaginery', 'images')
}
function createImageLayer(key, folder) {
var mapBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-34.55771388565057, -60.367219001054764), new google.maps.LatLng(-34.55817334541287, -60.3209562599659));
var imageMapTypeLayer = new google.maps.ImageMapType({
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
name: key,
getTileUrl: function(coord, zoom) {
if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
return "http://www.maptiler.org/img/none.png";
}
var ymax = 1 << zoom;
var y = ymax - coord.y -1;
var tileBounds = new google.maps.LatLngBounds(
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y) ) ),
map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x), (coord.y)))
);
// write a real condition here, so long this is always valid
if (tileBounds.intersects(tileBounds)) {
return "/static/ui/"+ folder + "/"+zoom+"/"+coord.x+"/"+y+".png";
} else {
return "http://www.maptiler.org/img/none.png";
}
},
tileSize: new google.maps.Size(256, 256)
});
map.overlayMapTypes.push(imageMapTypeLayer)
}
EDIT 1:
Up to now I have managed to overcome this by listening to the zoom_changed event and changing the base map to my imageMapType when the zoom reaches the maximum and back to satellite when the user zooms out. I wonder if there's a cleaner solution to this issue.