I've successfully implemented a map of Denmark using Leaflet. However, I need to show the municipalities in Denmark, and this is surprisingly complicated.
On this page, I gather that there are Mapbox Tileset IDs for administrative boundaries, so I suppose in principle, I could use these tilesets, but I feel this is not adequately explained on this page.
Can tilesets be added to a Leaflet map as a layer? This is unclear. My code for the basic map looks like this:
var map = L.map('map').setView([56,12], 7);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 20,
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: '[my_access_token]'
}).addTo(map);
Just replacing mapbox/light-v9 with e.g. mapbox/boundaries-adm4-v3 and the map is gone. Adding an entire new L.tilelayer(...id('mapbox/boundaries-adm4-v3')...).addTo(map); gives me the same old map with no administrative boundaries.
Am I naïve in expecting Mapbox to provide me with a free map of the municipalities of Denmark?
Have I combined too many things by using Leaflet, Mapbox and OpenStreetMaps?
How do I accomplish what I need? 1. Drawing of the Danish municipality boundaries on the map; 2. Coloring of selected municipalities.
Note that these are Vector Tiles.
Leaflet has no built-in functionality for rendering these types of tiles. However, you can take a look at the officially documented Vector-Tiles plugins: https://leafletjs.com/plugins.html#vector-tiles
Related
Is there a way to use a custom DEM for 3D viewing in the new mapbox release? I can use custom 2D rasters tiled using MapTiler, so I was wondering if the same option is available for "raster-dem" then setTerrain. The goal is to create something like this, but with my own elevation data:
https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/
Thanks
Good question. In theory, you ought to be able to produce your own raster tileset following the same Terrain RGB format like this:
map.addSource('mapbox-dem', {
'type': 'raster-dem',
'url': 'mapbox://yourusername.yourtilesetid',
'tileSize': 512,
'maxzoom': 14
});
map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });
However, the documentation does say:
Only supports Mapbox Terrain RGB (mapbox://mapbox.terrain-rgb):
It's unclear if they mean it only supports that format (seems more likely), or is somehow hardcoded to only support data from that exact data source (which seems a very strange choice).
Based on my very basic testing, Mapbox GL JS does attempt to fetch tiles from whatever source you provide, and doesn't give any weird error messages, but I haven't gone as far as actually producing such a tileset.
I am using leafletjs to plot geographical maps using OSM tiles. I used the following GeoJSON as a map layer http://code.highcharts.com/mapdata/1.0.0/custom/world.js which uses data from naturalearthdata.com
But it is not working. The tile layer is shown correctly. But the GeoJSON data is not being shown. I can only see a white line across the map.
var worldMapData = {}; //the geoJson data from http://code.highcharts.com/mapdata/1.0.0/custom/world.js
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: true,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
function style( feature ) {
return {
fillColor: '#FFEDA0',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
map.addLayer(L.geoJson(worldMapData, {style: style}));
Am I missing something? Is the above GeoJSON not according to specification? And if not, from where can I download GeoJSONs for all countries which are compatible with leafletjs?
[Edit] Here is the jsfiddle for the above problem http://jsfiddle.net/1x1p55fy/
The GeoJSON data is being loaded correctly, and is being displayed as expected. However, the GeoJSON data is not conformant to the GeoJSON spec, in regards to the coordinate reference system. Let me quote from the GeoJSON specs:
The coordinate reference system for all GeoJSON coordinates is a
geographic coordinate reference system, using the World Geodetic
System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units
of decimal degrees. This is equivalent to the coordinate reference
system identified by the Open Geospatial Consortium (OGC) URN
urn:ogc:def:crs:OGC::CRS84. An OPTIONAL third-position element SHALL
be the height in meters above or below the WGS 84 reference
ellipsoid. In the absence of elevation values, applications
sensitive to height or depth SHOULD interpret positions as being at
local ground or sea level.
Note: the use of alternative coordinate reference systems was
specified in [GJ2008], but it has been removed from this version of
the specification because the use of different coordinate reference
systems -- especially in the manner specified in [GJ2008] -- has
proven to have interoperability issues. In general, GeoJSON
processing software is not expected to have access to coordinate
reference system databases or to have network access to coordinate
reference system transformation parameters. However, where all
involved parties have a prior arrangement, alternative coordinate
reference systems can be used without risk of data being
misinterpreted.
If you have a closer look at the data in https://code.highcharts.com/mapdata/custom/world-highres.geo.json (or http://code.highcharts.com/mapdata/1.0.0/custom/world.js for that matter) you'll see that, in fact, the coordinates are not in latitude-longitude relative to the WGS84 geoid, and that there is a reference to the EPSG:54003 coordinate reference system (cylindrical miller), with a custom scale and offset transform.
As the GeoJSON spec already stated, you are hereby discouraged to use any other CRS than EPSG:4326 (WGS84 in latitude-longitude) in your GeoJSON data.
Find some conformant GeoJSON, and it will look OK in Leaflet. Leaflet does not handle reprojection of GeoJSON data, nor it handles the scale transforms that highcharts data implies.
I am using Australian government map data found here: Victoria, Australia locality data, which is provided in the EPSG4326 projection.
When I try to use the data with leaflet, of course, my data is a bit distorted due to the earth's curvature - so my data is not represented properly on the screen because the maps are using a different projection to my data.
I have tried to force the map to use EPSG4326 by setting it in Map options and also in the TileLayer, as shown here:
var gisLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//subdomains: ['0', '1', '2', '3'],
attribution: 'openstreetmap',
reuseTiles: true,
updateWhenIdle: false,
crs: L.CRS.EPSG4326
});
var map = L.map('map', {
center: [-28.5, 135.575],
zoom: 4
,crs: L.CRS.EPSG4326
});
map.addLayer(gisLayer);
but when I do this, the maps do not display. I don't believe the map tiles have been generated for this projection. That said, there is a suggestion in the docos here that it might be possible, but I couldn't get this working. (Did I just get the configuration wrong?)
It seemed like it was working when I retrieved the data and placed it on the map, but when I got the map bounds to select the data for the visible region, it also showed distorted. So I tried to convert the map bounds to EPSG4326 manually, to pass that to the database, as follows:
var bounds = map.getBounds();
var coords4326_NE = L.Projection.SphericalMercator.unproject(bounds._northEast);
console.log(coords4326_NE);
but that broke the code. I was passing the wrong structure in and I couldn't get this right either.
Of course, I would also accept transforming every point returned from the database to the default projection, which I think is EPSG3857. But I am having doing this as well.
I have provided as jsFiddle here where I have been attempting to do the above.
Does anyone know how I can achieve this?
Your GeoJSON data is encoded in WGS84, which can be simply plotted on EPSG4326, but is also the expected input for EPSG3857 (Web Mercator).
From that Wikipedia article:
While the Web Mercator's formulas are for the spherical form of the Mercator, geographical coordinates are required to be in the WGS 84 ellipsoidal datum.
Therefore, you do not have to change anything to plot your data onto a regular Leaflet map, using regular tiles (from OSM or Mapbox, which provide tiles only for EPSG3857).
I'm trying to use a Mapbox style in my map. The style loads fine, but it seems to be way off. My GeoJson file should load points in California, and it works fine with other tilesets, but using the Mapbox dataset it loads somewhere north of Canada in the arctic circle. This seems like it's probably a problem with projections. The GeoJson file is in WGS84, which I believe is the Geojson default. The setview centers the view on the US using other tilesets but also centers the data north of Canada using Mapbox data. Here's the bit where I include the Mapbox data
L.mapbox.accessToken = 'correct token';
var map = L.mapbox.map('map')
.setView([43.64701, -79.39425], 4);
L.mapbox.styleLayer('mapbox://styles/mapbox/light-v9').addTo(map);
Leaflet uses LatLng rather than mapbox's LngLat. Do you want your data to be around [43.64701, -79.39425], or around [-79.39425, 43.64701]?
See also Tom MacWright's explanation on why some libraries/formats use lat-lng and some use lng-lat.
I am having trouble recreating in Leaflet something that I found possible using the Google Maps API, which is having the base layer of my web map being geographically labeled satellite imagery. I can find "Street View" base imagery and I can find satellite imagery, but not with them combined into one base map layer.
Can anyone point me to an free resource for this kind of base map to use with Leaflet?
If what I am looking for does not exist, could my problem be solved by overlaying an existing "street view" map tile layer over the non-labelled satellite map tile layer?
Mapbox.com offers a basemap called "satellite streets". It looks like this.
You can sign up for free and include it into your leaflet map using your Map ID:
L.tileLayer('http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18
}).addTo(map);