I saw very nice map visualization by the city of Melbourne here:
http://www.pedestrian.melbourne.vic.gov.au/#date=11-03-2018&sensor=Col270_T&time=10
The map on this page is using Mapbox and OpenStreetMap (based on the credit in the bottom right corner). But I would like to know how did they accomplish tilting the map into Isometric.
I tried looking for a solution, but could not find the working one.
e.g. There is a link to this: http://osm.kyblsoft.cz/3dmapa/info. But its Github seems to disappeared.
Thank you very much for your help :)
See Set pitch and bearing in the Mapbox GL JS documentation.
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-73.5804, 45.534830],
pitch: 60, // pitch in degrees
bearing: -60, // bearing in degrees
zoom: 10
});
Related
I have a map in leafletJS and when the icon moves along, I have the angle and I am using the Leaflet.RotatedMarker plugin to rotate the icon to face where its heading.
Does leaflet js have a plugin that can enable me to not supply the angle myself ...
L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);
...and instead use a function like gogle maps' computeheading() ?
Edit:
Does mapbox have a function like computeHeading
https://github.com/bbecquet/Leaflet.RotatedMarker
js:
var boat_marker = L.marker([set_lat, set_long], {
pid: guid(),
// rotationAngle: 45,
icon: boatIcon,
draggable: true,
}).addTo(mymap);
function rotated_point() {
boat_marker.setRotationAngle(90);
}
No.
Leaflet has only a minimal set of geodesy-related functions. Functions to calculate headings, azymuths, geodesic distances or great circles are not needed for basic Leaflet functionality, and are not included.
A popular approach to this kind of problems is to rely on the javascript bindings of geographiclib for geodesy-related calculations (such as heading/azymuth), in the same way turf.js helps with geoprocessing of vector data.
Note that geographiclib is not a Leaflet plugin, but rather a generic set of geodesic functions. You will need to use a bit of care to get the latitude and longitude components of L.LatLngs, and fetch only the azymuth (and drop the distance) from the solution to the geodesic problem.
I am using Tileserver to host my mbtiles file. I am trying to open my mbtile sfile using leaflet in ionic. I am not able to see map. Following is the code that I am using:
leaflet.tileLayer('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(map);
I have also tried to use:
var mb = leaflet.tileLayer.mbTiles('http://subdomain/styles/klokantech-basic/?vector#{z}/{x}/{y}').addTo(this.map);
But I am just able to see grey screen on my device instead of map.
It sounds like leaflet is loading the tiles from your tile server, but the map you are serving doesn't have data for the location and zoom level you are looking at. Try this script.
Leaflet example:
<script>
var map = L.map('map').
setView([lat, lon], zoom );
//OpenMapTiles
L.tileLayer('http://subdomain/styles/klokantech-basic/{z}/{x}/{y}.png', {
//tms: true,
maxZoom: 20,
attribution: 'Map data © OpenStreetMap'
}).addTo(map);
</script>
An alternative is to use Mapbox GL JS, this pushes the rendering to your browser and allows you to use tileserver-gl-light as well:
<script src='http://subdomain/mapbox-gl.js'></script>
<link href='http://subdomain/mapbox-gl.css' rel='stylesheet' />
Mapbox GL JS
var map = new mapboxgl.Map({
container: 'map',
style: 'http://subdomain/styles/klokantech-basic/style.json',
center: [lon, lat],
zoom: 7
});
When creating the mbtiles file, make sure you create it to support the zoom level and location you set, OpenMapTiles defaults to a zoom level of 7, it may needs to be increased for your map, I use 14, which supports a zoom level to 20 for rendering.
Comparing maps from openlayers, leaflet and mapbox-gl-js, I can see that mapbox-gl-js has a different map image for the same center and zoom combination, and the same div size. It seems to zoom in one level extra compared to the openlayers and leaflet maps. Why is this?
yep that's correct. this one level difference is because the vector tiles used by mapbox-gl-js are 512px and in openlayers/leaflet/mapbox.js the raster tiles used are 256px. in other words, the appearance of a 512 tile at zoom level 0 is the same as the appearance of a 256 tile at zoom level 1. hope this helps!
512px tile 0/0/0
256px tile 1/0/0
You can set the zoomFactor of OpenLayerMap like this to make same as mapbox-gl
const view = new View({
center: [lng, lat],
zoom: zoom,
zoomFactor: 2.38
})
Also you should set the tileSize to 512 in openlayer map setting
The app uses mapbox with leaflet Js.
Theres a callback for the location-found event and we set a marker with user's location.
I'd the like map to rotate according with the user location, like a compass.
Any way to accomplish this?
Leaflet doesn't support map rotation (yet), or perspective, for that matter. See bug #268.
I did some work for this in the rotate code branch, but that is still kinda experimental and breaks easily. I don't think it will make it to the Leaflet core, as WebGL is a more promising (and less messy in the long run) way of achieving better results at map rotation than CSS transforms (which is what the rotate branch is about).
MapBox has a "bearing" option for that. Here https://jsfiddle.net/rwnfbu7c/1/ is a example
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
// camera options properties - https://docs.mapbox.com/help/glossary/camera/
center: [34, 28],
bearing: -65, // bearing in degrees
zoom: 2
});
I am trying to combine several hand-drawn map images into an interactive HTML feature using leaflet.
I've been trying to work up from the most basic code. To begin with I added three pictures at different zoom levels. I am still experimenting with that, but here's what the code looks like now:
var map = L.map('map').setView([0, 0], 10);
L.tileLayer('Drawn/Pacific.png',
{tileSize: 800, noWrap: true, minZoom:10, maxZoom: 10}).addTo(map);
L.tileLayer('Drawn/Hong Kong.png',
{tileSize: 800, noWrap: true, minZoom: 11, maxZoom: 11}).addTo(map);
L.tileLayer('Drawn/Kowloon.png',
{tileSize: 800, noWrap: true, minZoom: 12, maxZoom: 12}).addTo(map);
How can I offset the starting coordinates of these layers so that they line (So that Hong Kong at zoom level 11 is actually where it should be in the Pacific Tile at zoom level 10)?
Thanks!
It looks like you have only 1 big image per "tile layer", so you would probably be interested in implementing your features as Image Overlays instead:
Used to load and display a single image over specific bounds of the map.
With Image Overlay, you can specify the geographical coordinates of your image, so that it is placed exactly where you want. You can adjust the relative coordinates of your 3 images, so that they line up as you need.