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
});
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 have managed to get a working map and I have managed to combine it with the Leaflet timedimension slider. The next thing I have to do is get a moving marker on the map that changes position depending on a scripted path, for example the marker on date X is on some specific coordinates, but on date Y the marker moves towards different scripted position.
I have so far managed to get a marker on the map but I am at loss what I have to do to make it move. I looked at the various examples of posted here and the example that seems to be the closest to what I need to achieve is this one, but the code points towards and external .xml file, which I don't know how I have to code it to work and the example code doesn't show what variables does the marker itself have in the .html file.
My question is, is it even possible to get a marker moving using this "timeDimension" slider and if it is, could someone point me towards some example code I could look at?
And a bit unrelated, is my current set up the best thing to use if I want to have a map with a timeline slider that moves around lots of markers over a span of couple of years?
Here is the code I have so far,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="leaflet.timedimension.control.css" />
<style>#map { height: 500px; }</style>
</head>
<body>
<p style="text-align: center;"><strong><span style="font-size: 20px;">Heading test</span></strong></p>
<!--Map with needed map scripts-->
<div id="map" style="height: 75%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.
<script type="text/javascript" src="SliderScript.js"></script> //This is the Leaflet slider, just renamed
<!--Here is a script for map overlay -->
<!--Markers-->
<script>
var Icontest= L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {icon: Icontest},{draggable: true}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
This is the SliderScript.js, which is the same thing as the example.js file on this site.
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
// example.js
var map = L.map('map', {
zoom: 10,
center: [38.705, 1.15],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2014-09-30/2014-10-30",
period: "PT1H"
},
timeDimensionControl: true,
});
var wmsUrl = "http://thredds.socib.es/thredds/wms/observational/hf_radar/hf_radar_ibiza-scb_codarssproc001_aggregation/dep0001_hf-radar-ibiza_scb-codarssproc001_L1_agg.nc"
var wmsLayer = L.tileLayer.wms(wmsUrl, {
layers: 'sea_water_velocity',
format: 'image/png',
transparent: true,
attribution: 'SOCIB HF RADAR | sea_water_velocity'
});
// Create and add a TimeDimension Layer to the map
var tdWmsLayer = L.timeDimension.layer.wms(wmsLayer);
tdWmsLayer.addTo(map);
<html>
<head>
<title>Leaflet TimeDimension Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.control.min.css" />
</head>
<body>
<div id="map" style="height: 100%; width: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>
<script type="text/javascript" src="example.js"></script>
<!--Markers-->
<script>
var Icontest = L.icon({
iconUrl: 'icons/testicon1.png',
iconSize: [40, 25], // size of the icon
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
});
L.marker([29, 57], {
icon: Icontest
}, {
draggable: true
}).addTo(map); //Do I have to add something here to give it coordinates depending on date?
</script>
</body>
</html>
I have a problem with implementing the newest version of leaflet draw to my project.
The only requirement is to only use a CSS & Script links to get the plugin to work...(If it's not possible just ignore and try another way)
Basically, it should work just as on their website - https://freedraw.herokuapp.com/
What should I do to load the newest version of the plugin? What am I doing wrong?
I'm a beginner in this so thanks for any help.
<html>
<head>
<title>Free Draw</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css"/>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;">
</div >
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js" >
</script >
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"> </script >
<script>
//Creating map and setting zoom
var map = L.map('map').setView([45.8650, -75.2094], 3);
// Set up the OSM layer
L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.{ext}', {
ext: 'png',
maxZoom: 18,
attribution: 'Wikimedia maps | Map data © <a target="_blank" href="https://openstreetmap.org/copyright">OSM contributors</a>'
}).addTo(this.map);
// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
});
</script >
</body>
</html>
The latest version is 1.0.4 - so
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"> </script >
should fetch it in for you.
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.
I tried out Leafletjs maxBounds with example code I found at Mapbox.
Below you find my complete code, also in a jsfiddle here.
<!DOCTYPE HTML>
<html>
<head>
<title>map - leaflet test bounds</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var southWest = L.latLng(40.712, -74.227),
northEast = L.latLng(40.774, -74.125),
mybounds = L.latLngBounds(southWest, northEast);
var map = L.map('map').setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
maxBounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
</script>
</div>
</body>
The jsfiddle result looks odd, I don't know why.
Why doesn't the upper code work like the Mapbox example?
This is the (my) final code.
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[40.712, -74.227],
//north east
[40.774, -74.125]
],
}).setView([40.743, -74.176], 17);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}) .addTo(map);
L.marker([40.743, -74.176]) .addTo(map);
You must use bounds as an option of L.tileLayer, and not maxBounds.
Bounds reference
Also, it seems you've loaded a wrong file for the leaflet.css in JSFiddle, the correct source is this: http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css
Finally, avoid to use percent sizes in JSFiddle, use pixel ones instead.
Here's a working JSFiddle: http://jsfiddle.net/1zyL4q4a/4/
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Unless im mistaken your example you have followed in the first example is not a leaflet map the api provider is mapbox. The giveaway is in the top html script links of your first example you followed. Another is the unusual behaviour of my leaflet map when using the code from first example.
The correct provider of answer uses the leaflet API as seen in
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
bounds: mybounds,
maxZoom: 18,
minZoom: 16,
attribution: '© OpenStreetMap contributors'
}).addTo(map);