I am looking for a way to add images to a 'leaflet map' using Javascript.
What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.
Here's a basic demo showing how to add an image using imageOverlay.
You adjust the position and size of the image by providing imageBounds
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 5);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © OpenStreetMap',
maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
html,
body {
height: 100%;
}
#map {
height: 100%;
}
<script src="https://unpkg.com/leaflet#1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.0.2/dist/leaflet.css">
<div id="map"></div>
Related
Using latest leaflet library, I generated a plot in python from a GraDs file and supposedly I have the correct corners or bounds, but when overlaying in leaflet does not fit.
here is the simple code
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<style type="text/css">
html,
body,
#map {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<div id = "map"></div>
<script>
// Creating map options
var mapOptions = {
center: [14, -85],
zoom: 5
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
// var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// map.addLayer(layer); // Adding layer to the map
var esriImages = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');
var esriLabels = new L.TileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}');
var esri = L.layerGroup([esriImages, esriLabels]);
//default basemap
map.addLayer(esri);
// Creating Image overlay
var imageUrl = 'https://i.imgur.com/KNTRLHR.png';
var imageBounds = [[30,-115], [6,-59.03836]];
var overlay = L.imageOverlay(imageUrl, imageBounds,{ opacity:.7});
overlay.addTo(map);
map.on('click', function(e) {
// var popup = L.popup()
// .setLatLng(e.latlng)
// .setContent('<p>Hello, world!</p>')
// .openOn(map);
console.log ('click en ',e.latlng);
});
</script>
</body>
</html>
The representation of the image is like this as per NOAA site but is poor quality and also if i overlay does not fit.
What is the issue or how to fix it.
Thanks for any help
Edited: 2020.10.17 04Z
I am trying to display a portion of a map with this amount of code:-
<div id="mapid" style="height: 280px; width: 1143px;">
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script>
var mymap = L.map("mapid").setView([5, 120], 13);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: '© OpenStreetMap contributors',
}).addTo(mymap);
</script>
</div>
But that displays this portion of the map:-
But I am trying to get this portion of the map:-
is there any tool I can optimize my code to do so:-
You can set the view of the map with: map.setView([lat,lng],zoom)
For your example: mymap.setView([-3.687845, 113.776067], 4);
Or you can set the bounds (top left corner and right bottom corner) of the map, so the map is calculated what is the best zoom to contain the bounds.
var bounds = L.latLngBounds([6.884470, 94.897447],[-13.549102, 154.879214])
mymap.fitBounds(bounds)
But to answer your question, you can get the latlng when you click on the map with:
map.on('click',function(e){
console.log(e.latlng);
});
This question already has answers here:
Leafletjs map - map.invalidateSize is not working
(2 answers)
Closed 3 years ago.
image 1
image 2
leaflet.html
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="templates/leaflet/my_leaflet.css">
<div id="map"></div>
<script>
// Initialize leaflet.js
var L = require('leaflet');
// Initialize the map
var map = L.map('map', {
scrollWheelZoom: false
});
// Set the position and zoom level of the map
map.setView([49.42854, 32.06207], 6);
// Initialize the base layer
var osm_mapnik = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '© OSM Mapnik OpenStreetMap'
}).addTo(map);
$.getJSON("templates/leaflet/Ukraine.json", function (data) {
L.geoJson(data).addTo(map);
});
</script>
my_leaflet.css
#map
{
width: auto;
height: 700px;
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
}
body { margin:0; padding:0; }
When I start my Electron.js application and click the link to page 'leaflet.html', I see the map as at the first image.
But if resize application window to any size the map downloads good as at the second image.
I tried https://github.com/Leaflet/Leaflet/issues/3002 and Leaflet flipping tiles in electron solutions but nothing helped
Thank you Jan Wendland
I used this solution Leafletjs map - map.invalidateSize is not working after your comment
setTimeout(function(){ map.invalidateSize()}, 400);
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 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 ;)