I have a div that i am using to hold a leaflet map. It currently looks like this
I want the marker to be at the center or near center of the div so that its visible always even the marker is further left and out of view or out of view in any direction.
Currently my code looks like this
var mymap = L.map('mapid').setView([51.505, -0.09], 18);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 50,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([52.573921, -0.250830]).addTo(mymap)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
mymap.fitBounds([52.573921, -0.250830]);
mymap.setView([52.573921, -0.250830]);
mymap.setZoom(18);
I get the error bounds are not valid.
I would like my marker to be at least here
Try this one,
mymap.panTo(new L.LatLng(52.573921, -0.250830));
The reason for the error is that fitBounds() takes a L.latLngBounds as its argument, and you're passing it a single L.point.
You need a different way of panning the map to your desired centre location - maybe map.panTo() or map.flyTo() if you want pan/zoom animation.
Related
I made a map for my Minetest Game I play.
The project is here : https://github.com/amelaye/aiwMapping I created the map with the Python script gdal2tiles, like this : ./gdal2tiles.py -l -p raster -z 0-10 -w none ../map.png ../tiles
Here is the interesting part of code :
var minZoom = 0
var maxZoom = 9
var img = [
20000, // original width of image
20000 // original height of image
]
// create the map
var map = L.map(mapid, {
minZoom: minZoom,
maxZoom: maxZoom
})
var rc = new L.RasterCoords(map, img)
map.setView(rc.unproject([9000, 10554]), 7)
L.control.layers({
'Spawn': layerGeoGlobal(window.geoInfoSpawn, map, rc, 'red', 'star', 'fa'),
}, {
'Bounds': layerBounds(map, rc, img),
}).addTo(map)
L.tileLayer('./tiles/{z}/{x}/{y}.png', {
noWrap: true,
attribution: ''
}).addTo(map)
It works like a charm, but there is a problem : in Minetest, the coords (lat and lon) go to -10000 to 10000. In my Leaflet map, the coords still positive, then they go from 0 to 20000.
How can I solve this problem ?
CRS SIMPLE does not work.
PS : No relative questions have been posted, please read my message carefully.
When gdal2tiles is not given a georeferenced image (or a world file accompanying the image), it will assume that the (0,0) coordinate is at one of the corners of the image, and that one pixel equals one map unit (both horizontally and vertically).
Since your input image is a .png file, the most straightforward way of working around the issue will be creating an appropriate world file.
If your input image is map.png, create a new plain text file named map.pgw with the following contents...
1
0
0
1
-10000
-10000
...then run gdal2tiles.py again. Note that this worldfile assumes that one pixel equals one map unit, and the image's first corner is at the (-10000,-10000) coordinate.
So I am using Pixels in my Leaflet using crs: L.CRS.Simple and unproject in all the places I reference coordinates, it is working great.
However I am now trying to add a search bar and there is one line that I cannot figure out how to make it use pixels instead of LatLng (it's pulling pixel coords from a file)
var title = data.newsroom, //value searched
loc = [data.latitude, data.longitude] //position found
marker = new L.Marker(new L.latLng(loc), {title: title, icon:icon} );//se property searched
marker.bindPopup("<strong style='color: #84b819'>" + title + "</strong><br>" + data.company + " | " + data.city + "<br>Head: " + data.head);
markersLayer.addLayer(marker);
}
It's the marker = new L.Marker(new L.latLng(loc) line..I can't figure out how to unproject in that line to make it use pixels. Tried 100 different things but...yeah, I am not a coder so It has me dumbfounded.
Thanks in advance!
Try map.latLngToContainerPoint(latlng)
This converts the latlng to your container point.
https://leafletjs.com/reference-1.6.0.html#map-latlngtocontainerpoint
I want to print a map in leaflet,but i am stuck in some points:
First:The points (markers) didn't appear,
Second:i want to be able to define the scale in the printing time,
Third:i want to print the legend beside the map not on the map as in the picture below.
Can anyone help me?
L.easyPrint({
title: 'Print the map',
position: 'topleft',
elementsToHide: 'p, h2,h3,h5,a,label,nav,select,button,i,legend'
}).addTo(mymap);
I am not sure what the exact technical term for this question would be so please pardon the noobish question.
I have a leaflet map like this:
var map = L.map("dvMapContainer",
{
}).setView([39.782388193, -86.14135265], 14);
I am adding a marker to this map like this:
var vehicleMarker = new L.Marker([39.782388193, -86.14135265], { id: 'vehicle', icon: cssIcon });
map.addLayer(vehicleMarker);
Every few seconds, I update the position of the vehicleMarker and center the map
vehicleMarker.setLatLng(newLatLng);
map.setView(newLatLng, 18);
This works fine however the effect is not very visually pleasing as the map is constantly moving. I would like to move only the marker until it gets close to the edge of the map and then recenter the map. Is that possible ? Any hints/solutions will be much appreciated.
Each time you check (every few seconds), you can compare your marker location with the map bounds:
var bounds = map.getBounds();
if(vehicleMarker.getLatLng().lng > bounds.getEast()-.001 || vehicleMarker.getLatLng().lng < bounds.getWest()+.001 || vehicleMarker.getLatLng().lat > bounds.getNorth()-.001 || vehicleMarker.getLatLng().lat < bounds.getSouth()+.001)
//change bounds
If your next marker location is close to your current bounds, then change your map's current bounds.
You can change the .001 depending on how far zoomed out you are.
More info on bounds here: http://leafletjs.com/reference.html#latlngbounds
I am using google charts for plotting a graph
How can I show annotation of the point at right-hand-side of the point but it showing on the top of point
http://i.stack.imgur.com/UHhQH.png
I want it like as follow
http://i.stack.imgur.com/lUBcq.png
Please any one help me out
You can actually change the position of the annotations, by using css tranform.
You should first get a handle to the anntation text, if you want to change all the text, then you can use the text tag name in css
text {
transform: translate(10px, 30px);
}
I was able to adjust annotations to the right by doing 2 things:
1) Entered some white spaces (\u00A0 is white space) and a long dash (—) on the left side of the desired annotation.
2) Added stem length of -3.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Model');
dataTable.addColumn('number', 'T');
dataTable.addColumn({type:'string', role:'annotation'});
dataTable.addRows([
['ABC',30,'\u00A0\u00A0\u00A0\u00A0 — X'],
['DEF',20,'\u00A0\u00A0\u00A0\u00A0 — Y'],
['GHI',10,'\u00A0\u00A0\u00A0\u00A0 — Z'],
]);
var options = {
1: {annotations: {stem: {length: -3}}
};