I'm trying to show my my image via leaflet. My HTML and Image files are located in same folder. My images size is 1920x1080
I searched from internet and I have written this code:
<div id="map"></div>
<script>
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
var imageUrl = 'test.jpg';
var southWest = map.unproject([1920, 0], map.getMaxZoom());
var northEast = map.unproject([0, 1080], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
var imageBounds = [[1920, 0], [0, 1080]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>
Map has style:
<style>
#map { height: 480px; }
</style>
When I open my HTML file, leaflet shows nothing but grey background.
Did I miss something?
You do not need to unproject() the coordinates.
unproject turns map coordinates into screen pixel coordinates. You do not want to do that unless you are measuring screen pixels or positioning custom elements on the screen.
Without having a look at a live example, I can only guess that you're setting the map's bounds to an area outside the coverage of your image.
Related
I'm working on a website where I can customize a map, and them export it as a hi-def image so I can print it.
I generated the customizable map with mapboxgl API.
const initMap = () => {
const mapElement = document.getElementById('mapid');
if (mapElement) {
mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
map = new mapboxgl.Map({
container: 'mapid',
style: 'mapbox://styles/ma-v/cjzv3hkp30svs1cp5xeexv54g',
center: [5.380000, 43.300000],
zoom: 11.5
});
let frame = document.querySelector('#mapid');
frame.insertAdjacentHTML('beforeend', '<div class="map-title"><div class="title-map"></div><div class="info-track"></div><div>')
}
The user can customize the map (move localisation, zoom and change style layer basically).
Once the user wants to print its map, I generate a mapbox static image Url with all the infos of the personnalisation of the user (currentZoom, currentCenter, styleLayer), and I apply to it dimensions of 914px x 1280px (maximum size possible with mapbox).
The problem is that the rendered image covers a much bigger area than the DOM map (see example links below). Indeed, both have the same center, the same zoom, but the url image is twice the dom image in terms of pixels.
Dom image Url image
What I'd like is to keep the same zoom scale (so the rendered map is the same), but have a larger size of image in terms of pixels so I can print it in good quality.
I've tried several ways but always end up with this same issue.
Thank you VERY much for your help.
Cheers,
In case anybody would be interested, I finally managed to solve this by changing the initial width and height of the map div to 914 x 1280, and then resizing the canvas after the downloading of the DOM.
if (mapElement) {
mapboxgl.accessToken = mapElement.dataset.mapboxApiKey;
map = new mapboxgl.Map({
container: 'mapid',
style: 'mapbox://styles/ma-v/cjzv3hkp30svs1cp5xeexv54g',
center: [5.380000, 43.300000],
zoom: 11.5
});
mapElement.classList.toggle("small");
const mapCanvas = document.querySelector('.mapboxgl-canvas');
mapCanvas.style.width = "100%";
mapCanvas.style.height = "100%";
#mapid.small {
width: 426px;
height: 600px;
}
That way, the canvas "real" size is 914 x 1280, and yet it's displayed in a smaller div for the user.
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>
I have a map that is 8576x8576, and I keep getting console errors:
Failed to load resource: net::ERR_FILE_NOT_FOUND
Because leaflet are trying to load tiles that doesn't exists.
I have my bounds set and MaxBounds to prevent panning outside map area (to keep map on the center of the screen).
var map = L.map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
zoomControl: false,
crs: L.CRS.MySimple
}).setView([0, 0], 3);
L.tileLayer('assets/map/{z}_{x}_{y}.jpg', {
minZoom: mapMinZoom,
maxZoom: mapMaxZoom,
tileSize: 268,
noWrap: true,
reuseTiles: true,
tms: false,
bounds: mybounds,
errorTileUrl: "assets/map/404.jpg",
continuousWorld: true
}).addTo(map);
new L.Control.Zoom({position: 'topright'}).addTo(map);
var sidebar = L.control.sidebar('sidebar').addTo(map);
var mybounds = [[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]];
map.setMaxBounds([[-5600, -5600], [5600, 5600]]);
What I am doing wrong? Why leaflet keeps trying to load those tiles?
I tried to set MaxBounds like this:
map.setMaxBounds([[-8576 / 2, -8576 / 2],[8576 / 2, 8576 / 2]]);
And still get those errors.
You need to define mybounds before creating your tilelayer. If your bounds lie exactly on the edges of your tiles, you may also need to bring the bounds in by a tiny amount to keep the map from trying to load adjoining tiles. Here is an example with OSM tiles:
http://fiddle.jshell.net/nathansnider/2g4h5eu5/
The Google maps API Guide detailing the MapTypes interface states the following with regard to "required" properties:
maxZoom (required) specifies the maximum zoom level at which to
display tiles of this map type.
However, in the example given by Google at:
https://developers.google.com/maps/documentation/javascript/examples/maptype-base
The maxZoom property is NOT even included.
If the code is modified to include the maxZoom property (as shown below), the property has no effect -- should it? Some clarification would be nice ...
<!DOCTYPE html>
<html>
<head>
<title>Overlay map types</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
/** #constructor */
function CoordMapType(tileSize) {
this.tileSize = tileSize;
this.maxZoom = 12; // <--- THIS HAS NO EFFECT ??
}
CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.innerHTML = coord.toString() + '<br>zoom: ' + zoom.toString();
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '10';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
function initialize() {
var mapOptions = {
zoom: 10,
center: chicago
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Insert this overlay map type as the first overlay map type at
// position 0. Note that all overlay map types appear on top of
// their parent base map.
map.overlayMapTypes.insertAt( 0, new CoordMapType(new google.maps.Size(256, 256)));
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Found this buried in Google maps documentation in the section entitled "MapType object specification"...
maxZoom Type: number
The maximum zoom level for the map when displaying this MapType.
Required for base MapTypes, ignored for overlay MapTypes.
So, a maxZoom property is NOT required for overlay MapTypes; which corresponds to the behavior in my original code example.
If you changed mapType object's property ( maxZoom, minZoom, etc... ), the changed effect will take a place ONLY AFTER the map's type will be changed to that mapType.
For example , if current mapType is TERRAIN, and you changed TERRAIN's maxZoom, maxZoom will work only after changing mapType to another type (e.g. ROADMAP,HYBRID,etc..) and back to TERRAIN.
Instead of setting mapType's maxZoom option,use core map's maxZoom option. Add listener for "maptypeid_changed" event, and when event occurs, change maxZoom option of map:
google.maps.event.addListener(map, 'maptypeid_changed', function(event){
if( map.getMapTypeId() === google.maps.MapTypeId.TERRAIN ){
map.setOptions({maxZoom:/*For example*/5});
}else
if( map.getMapTypeId() === google.maps.MapTypeId.ROADMAP ){
map.setOptions({maxZoom:/*For example*/8});
}//Etc...
else{
map.setOptions({maxZoom:/*For example*/21});
}
});
I have a map and I want to center it to concrete point. Following implementation is working correctly:
var map = L.map('map', {
crs: crs
}
);
map.setView([58.66, 25.05], 2);
However, implementation below is not working correctly and does not center the map. Why it is happening? I get just blank grey area instead of my map. According to the documentation it does completely the same as the code above.
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05)
}
);
map.setZoom(2);
Why?
I think if you specify the center option when creating the map you also have to specify the zoom option or leaflet doesn't know what tiles to request.
var map = L.map('map', {
center: L.latLng(58.66, 25.05),
zoom: 2
});
When you use setView, you are setting center and zoom so leaflet knows the tiles to request.
Have you tried
var map = L.map('map', {
crs: crs,
center: L.latLng(58.66, 25.05),
zoom: 2
});
?