Anyone having problems to display Open street Map on leaflet?
Seems like the server is been down for two days?
var markersLayer = new L.LayerGroup(); // NOTE: Layer is created here!
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap ',
maxZoom: 18
});
var cartodb_light = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
attribution: 'Map data © OpenStreetMap contributors, © CartoDB ',
maxZoom:18
});
My ESRI layer does display but not the OSM? Anyone knows whats going on? It seems i cannot display the standard map on the website also... ?
Related
I have a Leaflet map with a control with openstreetmap and googlemap, when I load my page I see a openstreetmap for a istance and then swich to googlemap but I want to show openstreetmap for default.
this is my code:
<script>
var openStreetMap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
});
var googleMap = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
});
var map = L.map('map', {
center: [43.44084,11.8602],
zoom: 13,
layers: [openStreetMap, googleMap]
});
var baseMaps = {
'openStreetMap': openStreetMap,
'googleMap': googleMap
};
L.control.layers(baseMaps).addTo(map);
map.spin(true);
$.getJSON("http://localhost/fit-file-analysis-2/geojson.php",function(data){
L.geoJson(data).addTo(map);
map.spin(false);
});
You add an object of baseMaps to your map but you didn’t affect a tile layer.
Like #IvanSanchez says, you must add the tile layer to your map:
openStreetMap.addTo(map);
I have implemented the following piece of code where I need to fit a layer over a map, that I made using QGIS. But the coordinates are not working correctly, what should I do? The problem are the wrong coordinates or there is a way to fit the layer in the map correctly using overlay?
var L;
var initialCoordinates = [-14.91, -43.20];
var initialZoomLevel = 4;
// create a map in the "map" div, set the view to a given place and zoom
map = L.map('heatmap').setView(initialCoordinates, initialZoomLevel);
L.map('map', {
crs: L.CRS.EPSG4326
});
// add an OpenStreetMap tile layer
// L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
// attribution: '© OpenStreetMap © CartoDB',
// maxZoom: 19
// }).addTo(map);
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 18,
ext: 'png'
}).addTo(map);
// [[5.32, -28.95], [-33.1999, -73.9]]
var imageUrl = '/images/temperatureMapDefault.png', //temperatureMapDefault.png
imageBounds = [[5.32, -28.95], [-33.1999, -73.9]]; // [[ymin, xmin][ymax, xmax]]
L.imageOverlay(imageUrl, imageBounds).addTo(map);
The coordinates for the bounding box are working just fine; the problem is in the projections.
Your QGIS project, and your output image, are using EPSG:4326. Leaflet uses EPSG:3857 (spherical mercator) for display. If you try to overlay a stretched EPSG:4326 image over a EPSG:3957 one, the top and bottom edges will fit but you'll experience a vertical shift.
You can see this more clearly by creating a bigger image in EPSG:4326 with country boundaries. I encourage you to experiment.
Please read https://docs.qgis.org/2.18/en/docs/user_manual/working_with_projections/working_with_projections.html and related documentation in order to configure your QGIS project to use a different CRS.
I have a leaflet map that I will with this:
$('#map').height($(window).height()-64+'px');
var map = L.map('map' , { zoomControl:false }).setView([51.505, -0.09], 13);
new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
This gives a greyscale kinda boring map. I am trying to get a more colorful one for open street view like the one in the below link of you click on the layers and click "streets"
http://leafletjs.com/examples/layers-control-example.html
If you want to have a colored OSM map, change your L.tileLayer function with this
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
});
Here is a complete list of various basemap providers for leaflet.
Check this link as well
Following first code snippet doesn't display map
Snippet 1:
var mapEle = document.getElementById('map');
var map = L.map(mapEle);
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
Snippet 2:
var mapEle = document.getElementById('map');
var map = L.map(mapEle).setView([43.07265,-89.400929], 10);
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1','otile2','otile3','otile4']
}).addTo(map);
Made change in second line of first snippet, Added setView([43.07265,-89.400929], 10), it displays map, am i missing something, or setview is compulsory?
UPDATE
leaflet version: 0.7.3
with setView(), you tell leaflet which tile(s) http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png must be fetched from the server.
So yes it is compulsory
I have a few WMS layers generated by geoserver (data from postgis), in leaflet I'm creating layers using both L.tileLayer.wms and L.tileLayer. In both cases I have the same result - there is the same data on each tile. The data is repeated on each tile. The data is not on the correct coordinates.
Hard to explain, you can look at enclosed printscreen here.
My code look like this:
var sondy = new L.tileLayer.wms('http://localhost:8080/geoserver/archeo/wms?bbox=-556182.167458477,-1031638.88186088,-556085.240458477,-1031526.68186088&width=442&height=512', {
version: '1.1.0',
layers: 'archeo:sondy_5514>4326',
format: 'image/svg+xml',
crs: L.CRS.EPSG4326,
maxZoom: 21,
transparent: true,
attribution: 'Map data © Archeo'
});
var lokalita = new L.tileLayer('http://localhost:8080/geoserver/archeo/wms?service=WMS&version=1.1.0&request=GetMap&layers=archeo:lokalita%3E4326&styles=&bbox=17.001919195719633,50.3879944052749,17.00420450498308,50.38958109165828&width=512&height=355&srs=EPSG:4326&format=image%2Fsvg%2Bxml', {
layer: 'lokalita',
opacity: 1,
maxZoom: 21,
transparent: true,
attribution: 'Map data © Archeo'
});
Do you have an idea where is the problem? Is it in geoserver or leaflet code?
Thanks in advance,
Markéta
Ciao,
I am not an expert with leaflet but to me it looks like something's wrong in how you initialize your layers (for sure the WMS one, why you put the bbox in the source URL??):
Check this link:
http://leafletjs.com/reference.html#tilelayer-wms