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.
Related
I want to get a popup marker(by image) on my map every time I double click on the screen. Every time I try to copy other's code, it won't work. Can someone help plz?THE MARKER NEEDS TO BE AN IMAGE!
I try to copy other's code, but it won't work. I'm still new in this line of work, so I don't know really how to do it on my own.
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
map.on('dblclick',(e)=>{
L.marker(e.latlng).addTo(map).bindPopup('Hello World').openPopup()
})
Demo: https://plnkr.co/edit/u7QL15wYzLprVwhP
Custom icons: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95], // size of the icon
iconAnchor: [22, 94],
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
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'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.
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
I am using mapbox/leaflet to display a picture of a human body rather than a regular map.
I am using leaflet draw and I need to be able to create a circle and move it around while maintaining its radius. However, when I move it towards the bottom of the map/screen, the size increases exponentialy. I want it to stay the same size.
I assume it's something to do with projection or CRS but I'm not sure what to do to stop it.
My code is :
var mapMinZoom = 0;
var mapMaxZoom = 4;
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: L.CRS.Simple,
noWrap: true,
continuousWorld: true
}).setView([0, 0], mapMaxZoom);
var mapBounds = new L.LatLngBounds(
map.unproject([0, 3840], mapMaxZoom),
map.unproject([4096, 0], mapMaxZoom));
map.fitBounds(mapBounds);
L.tileLayer('/tiles/{z}/{x}/{y}.png', {
minZoom: mapMinZoom, maxZoom: mapMaxZoom,
bounds: mapBounds,
attribution: 'Rendered with MapTiler',
noWrap: true,
continuousWorld: true
}).addTo(map);
var touches;
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: featureGroup
}
}).addTo(map);
map.on('draw:created', function (e) {
featureGroup.addLayer(e.layer);
});
Any ideas? I don't need to use leaflet draw, just the L.circle would do, but it has the same issue.
Gif of issue here :
Turns out there are a load of todos in the leaflet 0.7 code... including this little gem :
// TODO Earth hardcoded, move into projection code!
_getLatRadius: function () {
return (this._mRadius / 40075017) * 360;
},
_getLngRadius: function () {
return this._getLatRadius() / Math.cos(L.LatLng.DEG_TO_RAD * this._latlng.lat);
},
Updated to 0.8Dev and it has all been fixed!