Hi i try to set the maxbaounds in a leaflet map but it doesn't work. My first questions is maxbounds stop to pan outside the borders that I set? I follow this examples but something is wrong in my code
Leaflet maxBounds - bounds do not work
https://docs.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/
My code
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css" />
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script>
var southWest = L.latLng(34.072711,31.758391),
northEast = L.latLng(36.113055, 35.124228),
bounds = L.latLngBounds(southWest, northEast);
var counties = $.ajax({
url: "https://gist.githubusercontent.com/vassilaros/3791204ca226d5b236b4cd3106ef23cf/raw/PicnicSites.geojson",
dataType: "json",
success: console.log("County data successfully loaded."),
error: function(xhr) {
alert(xhr.statusText)
}
})
$.when(counties).done(function() {
var map = L.map('map')
.setView([35.126411,33.429859], 9);
//tiles - http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png
var basemap = L.tileLayer('http://tile1.maps.2gis.com/tiles?x={x}&y={y}&z={z}', {
attribution: '© 2GIS © Open Cartography',
subdomains: 'abcd',
maxBounds: bounds,
maxZoom: 19,
minZoom: 9
}).addTo(map);
// Add requested external GeoJSON to map
var kyCounties = L.geoJSON(counties.responseJSON).addTo(map);
var scale = L.control.scale()
scale.addTo(map)
});
</script>
</body>
</html>
Use maxBounds on the L.map to set the bounds limits.
var map = L.map('map')
.setView([35.126411,33.429859], 9)
.setMaxBounds(bounds);
Plus - don't confuse mapbox.js with leaflet.js - they're different.
Related
In the head the following code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant#latest/dist/Leaflet.GoogleMutant.js"></script>
</head>
<body>
<div id="map" style="height: 500px;"></div>
<script>
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<my-api-token>';
var grayscale = L.tileLayer(mbUrl, {
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
}),
streets = L.tileLayer(mbUrl, {
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
attribution: mbAttr
});
var map = L.map('map', {
center: [45.38, 7.88],
zoom: 12,
layers: [streets]
});
var google = L.gridLayer
.googleMutant({
type: "satellite", // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
});
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets,
"Google": google
};
L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>
When I load the page and I select the "Google" layer, the tiles are loaded correctly, but if I move or zoom the new tiles are not loaded. The other layers work correctly.
If I add the line google.addTo(map); at the end of the script, the google layer is shown on top of the streets layer, but still it doesn't load the new tiles when I move or zoom.
The Google Maps API defines a variable named google in the Window global scope. GoogleMutant depends on that variable being defined and valid.
By doing var google = L.gridLayer.googleMutant(...), you're effectively redefining that variable.
Use any other variable name.
I am creating a map that consists of three maps and markers total that can be switched between like in this leaflet example, although when I test it, instead of the each map rendering as a single version filling the map frame they display as many multiple in a tile layout. Below is my code I am currently using, note that the images I am using for the maps are not actually maps thus I am using the 'L.CRS.Simple'.
This is the result I was expecting (sans the makers and with my images), maybe someone can spot where I went wrong?
-
<html>
<head>
<title>Interactive Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
<style>
#map {
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div id="map">
<script>
var map1 = L.tileLayer('map1.png');
var map2 = L.tileLayer('map2.png');
var map3 = L.tileLayer('map3.png');
var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu
var map = L.map('map', {
crs: L.CRS.Simple,
layers: [map1, map2, map3, markers],
maxZoom: 5
});
var baseMaps = {
"Map 1": map1,
"Map 2": map2,
"Map 3": map3
};
var overlayMaps = {
"Markers": markers
};
var bounds = [[0,0], [1000,1000]];
L.control.layers(baseMaps, overlayMaps, bounds).addTo(map);
map.fitBounds(bounds);
</script>
</div>
</body>
Yes, I am using locally stored images, no, I do not have images setup to use the standard URL format, if you choose to try my code just sub in 3 random pictures.
Here is a pic of what is occurring:
You forgot a 's' to markers
var overlayMaps = {
"Markers": markers
};
It should work now ;)
I am having an issue disabling scrollwheel zoom in Leaflet Minimap.
I am instantiating the minimap with a centerFixed and a zoomLevelFixed option as per https://github.com/Norkart/Leaflet-MiniMap/pull/95 but I can still zoom with the scroll wheel; Panning is disable though.
The following is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="fullscreen.css" />
<!-- Leaflet -->
<link rel="stylesheet"
href="https://unpkg.com/leaflet#1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.1/dist/leaflet.js"
type="text/javascript"></script>
<!-- Leaflet Plugins -->
<link rel="stylesheet" href="Control.MiniMap.css" />
<script src="Control.MiniMap.js" type="text/javascript"></script>
</head>
<body>
<div id="map" ></div>
<script type="text/javascript">
var map = new L.Map('map', { scrollWheelZoom: false});
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {/*minZoom: 5, maxZoom: 18,*/ attribution: osmAttrib});
map.addLayer(osm);
map.setView(new L.LatLng(59.92448055859924, 10.758276373601069),10);
//Plugin magic goes here! Note that you cannot use the same layer object again, as that will confuse the two map controls
var osm2 = new L.TileLayer(osmUrl, {/*minZoom: 0, maxZoom: 13,*/ attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2,
{ position: "topright",
centerFixed: [40.7842, -73.9919],
toggleDisplay: true,
zoomLevelFixed: true
}).addTo(map);
</script>
</body>
</html>
I appreciate any guidance in solving this issue. Thank you!
I suppose you should use disable instead of false.
map.scrollWheelZoom.disable();
It will also work when you pass as arguments:
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
scrollWheelZoom: false
});
I built a map using Node+Jade+Express+Sqlite. I am trying to add a minimap using a plugin. I added a function to show it but nothing happens.
Here is the code I am using
HTML //here my html code, I use a spin while loading the layers and a function to load the minimap, but the minimap does not show.
According to Minimap's documentation, you cannot use the same layer object again, as that will confuse the two map controls, so, that's why needs to create a new object.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./stylesheets/leaflet-0.7.7/leaflet.css">
<body>
<input value=" + " onclick="showLayer('outdoors','http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png')" id="addOutdoors" type="button">
<div id="map" style="width: 100%; height: 800px"></div>
<script src="./javascripts/leaflet-0.7.7/leaflet.js"></script>
<!-- Spin's include files: https://github.com/makinacorpus/Leaflet.Spin -->
<!-- MiniMap's include files: https://github.com/Norkart/Leaflet-MiniMap -->
<script>
var map;
var mbTiles = new L.tileLayer('tiles?z={z}&x={x}&y={y}', {
tms: true,
attribution: 'test',
opacity: 0.7
});
map = new L.Map("map",{
fullscreenControl: true,
zoom: 3,
center: [-33.49702,-70.65462],
layers: [mbTiles]
});
function showLayer(layerName,layerURL){
tileLayer = L.tileLayer(layerURL, {
attribution: 'Map data © OpenStreetMap',
});
showLoading(layerName,layerURL);
}
function showLoading(layerName, layerURL) { //this function show the spin image while loads the layer
map.spin(true);
setTimeout(function () {
map.addLayer(layerName);
map.spin(false);
}, 3000);
showMiniMap(layerURL);
}
function showMiniMap(layerURL){//this function must show the minimap
var osm2 = new L.TileLayer(layerURL, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
}
</script>
</body>
</html>
Any ideas?
Besides several other mistakes, the probable one that kills your mini-map is the missing definition for osmAttrib variable.
Other mistakes:
Missing head closing tag.
Use of addLayer with a string as argument, instead of a Layer object.
Demo: http://plnkr.co/edit/ipy91EvabCmKAzAQ4yes?p=preview
Hi I am using the following https://github.com/perliedman/leaflet-control-geocoder to get the location on map. But When I get the result I want to have the option to move the marker so I can adjust the coordinates. I found a code that is moving the marker and shows the coordinates in a 2 fields but I have problem to join the two codes together. Also how I get the results coordinates to show in the two flields. I dont have much experience with leaflet maps so any help would be appreciated.
Thank you
Dany
my code:
<html lang="en">
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="assets/css/leaflet-control-geocoder.css" />
</head>
<body>
<div class="map" id="map" style="width: 600px; height: 400px"></div>
<input id="latitude" type="text" name="latitude" />
<input id="longitude" type="text" name="longitude" />
</body>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="assets/js/leaflet-control-geocoder.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([0, 0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.Control.geocoder().addTo(map);
var marker = L.marker([51.441767, 5.470247],{
draggable: true
}).addTo(map);
marker.on('dragend', function (e) {
document.getElementById('latitude').value = marker.getLatLng().lat;
document.getElementById('longitude').value = marker.getLatLng().lng;
});
</script>
</html>
Simply refer to Leaflet Control Geocoder API.
You can customize what the plugin does with the result it receives from the search request. By default it creates a (fixed) marker, binds a popup and opens it.
In your case, you could do:
var geocoder = L.Control.geocoder().addTo(map),
latInput = document.getElementById('latitude'),
lngInput = document.getElementById('longitude'),
previousMarker;
// Customize what to do from the result.
geocoder.markGeocode = function (result) {
var latlng = result.center;
// Remove previous marker if any.
if (previousMarker) {
map.removeLayer(previousMarker);
}
previousMarker = L.marker(latlng, {
draggable: true // Create a draggable marker.
}).addTo(map).
on('dragend', onDragEnd). // Attach position display.
bindPopup(result.html). // Emulate Geocoder default behaviour.
openPopup(); // bind a popup and open it right away.
displayLatLng(latlng); // Display position right away.
};
function onDragEnd(event) {
var latlng = event.target.getLatLng();
displayLatLng(latlng);
}
function displayLatLng(latlng) {
latInput.value = latlng.lat;
lngInput.value = latlng.lng;
}
Demo: http://jsfiddle.net/ve2huzxw/11/