I tried to create a map using leaflet.js using the following code:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
What is the correct SRID for that map? I tried 4326 SRID. Unfortunately when the geometry viewer from PostGIS and the map from leaflet.js render a point, the point shows different location. Thank you.
Related
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
I am using Tileserver to host my mbtiles file. I am trying to open my mbtile sfile using leaflet in ionic. I am not able to see map. Following is the code that I am using:
leaflet.tileLayer('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(map);
I have also tried to use:
var mb = leaflet.tileLayer.mbTiles('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(this.map);
But I am just able to see grey screen on my device instead of map.
It sounds like leaflet is loading the tiles from your tile server, but the map you are serving doesn't have data for the location and zoom level you are looking at. Try this script.
Leaflet example:
<script>
var map = L.map('map').
setView([lat, lon], zoom );
//OpenMapTiles
L.tileLayer('http://subdomain/styles/klokantech-basic/{z}/{x}/{y}.png', {
//tms: true,
maxZoom: 20,
attribution: 'Map data © OpenStreetMap'
}).addTo(map);
</script>
An alternative is to use Mapbox GL JS, this pushes the rendering to your browser and allows you to use tileserver-gl-light as well:
<script src='http://subdomain/mapbox-gl.js'></script>
<link href='http://subdomain/mapbox-gl.css' rel='stylesheet' />
Mapbox GL JS
var map = new mapboxgl.Map({
container: 'map',
style: 'http://subdomain/styles/klokantech-basic/style.json',
center: [lon, lat],
zoom: 7
});
When creating the mbtiles file, make sure you create it to support the zoom level and location you set, OpenMapTiles defaults to a zoom level of 7, it may needs to be increased for your map, I use 14, which supports a zoom level to 20 for rendering.
I saw very nice map visualization by the city of Melbourne here:
http://www.pedestrian.melbourne.vic.gov.au/#date=11-03-2018&sensor=Col270_T&time=10
The map on this page is using Mapbox and OpenStreetMap (based on the credit in the bottom right corner). But I would like to know how did they accomplish tilting the map into Isometric.
I tried looking for a solution, but could not find the working one.
e.g. There is a link to this: http://osm.kyblsoft.cz/3dmapa/info. But its Github seems to disappeared.
Thank you very much for your help :)
See Set pitch and bearing in the Mapbox GL JS documentation.
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.5804, 45.534830],
pitch: 60, // pitch in degrees
bearing: -60, // bearing in degrees
zoom: 10
});
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 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);