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);
Related
I'm loading an overlay ('overlay' in the code below) onto a leaflet base map (openstreetmap) and would like that this overlay completely fills the display window once loaded.
I think I should use getBounds and setView using values gotten through getBounds but didn't manage to make it work.
// initialize the map
var map = L.map('map').setView([48.85, -3], 15);
// load a tile layer
L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
minZoom: 3,
maxZoom: 18,
subdomains: 'abcd',
detectRetina : true
}).addTo(map);
//Load overlay
var overlayOptions = {
attribution: '...',
//minZoom: 3,
maxZoom: 19,
opacity: 1,
format: 'image/png',
detectRetina: true,
//unloadInvisibleTiles: true,
};
overlay = L.tileLayer('https://www.laurentgontier.com/BrehatSHOM/{z}/{x}/{y}.png', overlayOptions).addTo(map);
//fit map view to overlay bounds
map.fitBounds(overlay.getBounds());
So far, the last line supposed to frame the overlay into the display window doesn't seem to work.
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... ?
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
this is a part of my leaflet code :
// Init
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [test, boutiques]
});
L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// overlays
var overlays = {
"Test": test,
"Boutiques": boutiques
};
L.control.layers(overlays).addTo(map);
I want that a overlay can be displayed one by one (via radio button), the problem is that at loading the "boutiques" overlay is selected but "test" is also displayed.. How to put "test" hidden by default ?
Just initialize map without test:
var map = L.map('map', {
center: [46.7, 2.5],
zoom: 6,
layers: [boutiques]
});
JSFiddle example.