Leaflet custom map with custom tiles - javascript

I am trying to make a custom map with leafletjs, and i've figured it out for the version 0.6.x but when it comes to the latest version (0.7.x) it does not work.
This is the code that works with 0.6.x
Anyone has had this issue before?
var mapMinZoom = 0;
var mapMaxZoom = 5;
var map = L.map('wu-map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3072], mapMaxZoom),
map.unproject([4352, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('images/map/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true,
tms: false
}).addTo(map);

There is a bug in leaflet.js 0.7 version that appears when crs option is set to L.CRS.Simple value (and not only). Leaflet 0.7 introduced L.CRS.getSize (a function which returns the size of the world in pixels for a particular zoom for particular coordinate reference system), which by default calls and returns the same value as L.CRS.scale. It works great for the default CRS and fails for others.
All I can suggest is to remove crs: L.CRS.Simple from your options object, it will be set to default value (L.CRS.EPSG3857):
var map = L.map('wu-map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom
}).setView([0, 0], mapMaxZoom);

Related

Dealing with a huge GeoJson in leaflet

I'm currently dealing with a Huge GeoJson (about 100Mb) that contains all nation subdivisions in the world.
I want to display this GeoJson in a Leaflet map.
I have implemented this add-on that binds geojson-vt with leaflet.
However, simply I can't send 100Mb of data all the times...
This is a Javascript sample of the Leaflet implementation in JS:
//Map init
var map = L.map('map').setView([51.505, -0.09], 1);
//Tile layer
var tile_layer = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
//GeoJson fetch
world_geojson = fetch('./world.json').then(response => response.json()).then(
world_geojson => {
var options = {
maxZoom: 16,
tolerance: 3,
debug: 0,
style: {color:'#000',fillColor:"#0f0",weight: 1,opacity: 0.5,fillOpacity: 0.2}
};
//Actual geojson-vt layer implementation
var geojson_layer = L.geoJson.vt(world_geojson, options).addTo(map);
}
);
There is a way or some tricks to reduce the quantity of data sent to the users?
Thanks for support!

Make leaflet only display markers on start and endpoint whilst having multiple waypoints in route

Currently I initiate my Leaflet map in Angular like this:
private initMap(): void {
this.map = L.map('map', {
center: [ 51.4381919, 5.4797248 ],
zoom: 13
});
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 3,
attribution: '© OpenStreetMap'
});
tiles.addTo(this.map);
L.Routing.control({
waypoints: [
L.latLng(51.4508647, 5.4509124),
L.latLng(51.443867, 5.45591),
L.latLng(51.442804, 5.4648277)
],
}).addTo(this.map);
}
I have 3 waypoints, to calculate a route (this can go up to 1000's depending on how many datapoints I fetch from my database)
Currently Leaflet displays 3 markers, as I assigned it to do. But I want it to no matter the amount of waypoints I have, to draw a route but only display the first and last marker.
How would I do this?
You can use the createMarker function in Routing.plan:
var control = L.Routing.control({
plan: new L.Routing.Plan([
L.latLng(51.4508647, 5.4509124),
L.latLng(51.443867, 5.45591),
L.latLng(51.442804, 5.4648277)
],{
createMarker: function(i, waypoint, n){
if(i === 0 || i === n - 1){
// show markers
return L.marker(waypoint.latLng);
}
return false;
}
})
}).addTo(mymap);
https://jsfiddle.net/qhbjua2k/

Showing more details ons leaflet map

Currently i'm implementing a leaflet map that serves map data from our own OSM server.
During the implementation I noticed that the details on the maps are not clearly visible. Street names are unclear and walking paths do not stand out.
We currently support a zoom level of 17. However, the tiles received are of high quality and show much more detail than leaflet does. If I zoom in further, the tiles unfortunately turn gray.
An implementation with OpenLayers looks clearer.
Is there a setting that solves this or that allows you to zoom in without showing gray tiles? I thought this was maxNativeZoom but if i put this field on 17, it still tries to show zoom level 18 tiles.
const osmLayer = new L.TileLayer(osmUrl,
{
attribution: '© OpenStreetMap contributors'
});
const element = elemId[0].className + "-" + mapId;
const map = new L.Map(element,
{
maxZoom: 22,
maxNativeZoom: 17,
minZoom: 9
});
map.addLayer(osmLayer);
return map;
I just moved the zoom settings to the tileLayer and that seems to work. The settings are properties of the tileLayer:
const osmLayer = new L.TileLayer(osmUrl,
{
maxZoom: 20,
maxNativeZoom: 17,
minZoom: 9,
attribution: '© OpenStreetMap contributors'
});
const element = elemId[0].className + "-" + mapId;
const map = new L.Map(element);
map.addLayer(osmLayer);
return map;

OpenLayers: lock map to the vector's extents

I'm learning how it is possible to create a library in JavaScript using OpenLayers. Normally I use the code below to lock my map on the vector extent passed manually.
var minX= 3.0025038498794938;
var minY= 47.7706339888675302;
var maxX= 5.1702255722362533;
var maxY= 49.5690401585264695;
var maxExtent = [minX, minY, maxX, maxY];
var boundary = ol.proj.transformExtent(maxExtent, 'EPSG:4326', 'EPSG:3857');
var center = ol.proj.transform([4.0863647111, 48.6698370737], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
extent: boundary,
center: center,
zoom: 9,
maxZoom: 18,
minZoom: 8,
});
map.setView(view);
My aim is use the same phylosophy but using the extent of a vector inside a specific function. I'm be able to load the map on a zoom on the vector extensions:
function getPolygonsExtent() {
vectorsLayer.getSource().once('change', function(evt) {
if (vectorsLayer.getSource().getState() === 'ready') {
if (vectorsLayer.getSource().getFeatures().length > 0) {
extent = vectorsLayer.getSource().getExtent();
options = {
size: map.getSize(),
padding: [0, 0, 0, 0],
}
map.getView().fit(extent, options);
}
}
});
};
But I've no idea how I can follow my aim. I thought there was a function like map.getView().setExtent(extent);, but is is not so. Any suggestions?
There is no setExtent() method so you will need to create a new view
map.getView().fit(extent, options);
var newView = new ol.View({
extent: extent,
showFullExtent: true,
center: map.getView().getCenter(),
zoom: map.getView().getZoom(),
maxZoom: 18,
minZoom: 8,
});
map.setView(newView);
The fit() method fits the extent inside the map, but by default the extent option constrains the map inside the extent, use showFullExtent for similar behaviour to fit(). If your fit options include a duration you will also need a callback to update the view when it is finished inside of doing it in inline code.

mapbox.js: set map limit bounds

I'm working on a map with mapbox.js but I want to set a limit to map bounds and zoom.
What code I've to add to this script?
var map = L.mapbox.map('map', 'examples.map-9ijuk24y').setView([40, -74.50], 9);
These are options you can put in an object to pass to L.mapbox.map as the third argument. The documentation for L.mapbox.map says that is can take all the same options as Leaflet's L.map, which are documented here. The options you want are minZoom, maxZoom, and maxBounds. Eg:
var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
minZoom: 5,
maxZoom: 12,
maxBounds: [[30.0,-85.0],[50.0,-65.0]]
}).setView([40, -74.50], 9);

Categories