I'm just trying to do a simple map using the Leaflet.js libraries directly instead of the python wrappers(ipyleaflet, folium) but I can't any map to display regardless of what I do. the map area is drawn the correct size with the zoom controls, as are the tile attributions, and a marker in the right location. I have tried multiple browsers and also in QWebEngineView as well as different tile sets. I've also tried both the hosted js and css scripts as well as local copies The results are the same. Everything with the same v1.7.1 release though.
Here is the html code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<!-- <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>
-->
<style>
#map {
width: 900px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layer = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/satellite-v9',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
});
var mymap = L.map('map', { preferCanvas: true, center: [43.08695, -73.75792], layers: [layer], zoom: 10 });
var mymarker = L.marker([43.08695, -73.75792], { draggable: true }).addTo(mymap)
</script>
</body>
</html
Here's a screenshot
Anybody got any ideas? This ought to be something really simple...
Related
I am quiet new to Web Services and I am facing a problem.
I have a Map linked with a WMS.
I added a basemap and my WMS Date as a tileLayer and the show up correctly on my map.
Now I want the nearest Feature to PopUp when I click anywhere on the map.
I already searched the Web but could not find a solution I understood. (https://gist.github.com/rclark/6908938)
Can anyone help me with this?
This is my code so far:
<!DOCTYPE html>
<html>
<head>
<title>XXX</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<style type="text/css">
#nrwMap { height: 800px; width: 1300px;}
</style>
</head>
<body>
<div id="Map"></div>
<script type="text/javascript">
var mymap = L.map('Map').setView([51.28, 7.33], 8);
var url = 'http://www.xxx.xxx.com/wms/';
var basemap = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox/streets-v11'
})
basemap.addTo(mymap);
var featureLayer = L.tileLayer.wms(url, {
layers: 'layerName',
format: 'image/png',
transparent: true
});
featureLayer.addTo(mymap);
</script>
</body>
</html>
Leaflet.GeometryUtil has a function/feature called closestLayer. It might help.
mymap.on('click', onMapClick);
function onMapClick(e) {
nearestLayer = L.GeometryUtil.closestLayer(mymap, layersToSearch, e.latlng)
// It will return the layer, latlng of point on layer nearest to the 'click' and distance from the 'click' }
I have been trying to make a WMS service work with leaflet. I just want to use the standard CRS=EPSG:3857 which does seem to be supported by the service. However I just cannot get the WMS layer to line up on the OpenStreetMap base layer.
This picture should line up over Canada. It works in QGIS just fine.
Here is a code pen:https://codepen.io/keenedge/pen/dybWgbM
This is the doc page for the WMS I need to use.
I've tried setting crs: L.CRS.EPS3857 in the map and in the WMS layer but it seems to have no effect.
Anyone now how to get this code pen working?
full code here:
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 800px; height: 800px;"></div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = 'Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 19, attribution: osmAttrib });
var wmsOptions = {
layers: 'HRDPS.NORTH.PRES_WSPD.275',
transparency: true,
format: 'image/png',
version: '1.3.0'
}
var url = 'https://geo.weather.gc.ca/geomet'
var wmsLayer = L.tileLayer.wms(url, wmsOptions);
var myMap = L.map('mapid').setView([49, -123], 2);
osm.addTo(myMap);
wmsLayer.addTo(myMap);
</script>
</body>
</html>
Thanks for your help
The HRDPS.NORTH.PRES_WSPD.275 layer from that WMS server looks exactly the same in Leaflet than in QGis, when QGis is configured to display EPSG:3857:
You're doing nothing wrong. Note that other layers from the same WMS service do cover continental Canada, or the ocean, or some other area.
I am trying to display my dronedeploy map with leaflet.js, but the link which is generated by the Leaflet Tile Layer market app gives me an access denied error.
I am on a 30 day trial account but I have a few weeks remaining.
Also, is this the best way to display the data in leaflet? I noticed you can export the map as GeoTiff tiles, but I cannot find any examples on how to import/display these in leaflet
Okay so after replacing the {z}/{x}/{y}.png in the url with valid tile numbers, I got back some results.
I used this page to calculate a valid tile number:
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
However this was unnecessary to get my map displayed in leaflet.
All I had to do was use the url when defining a tile layer, here's a complete example:
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([14.0, -8.2474], 13);
// add base map layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 22,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
// url generated from "Leaflet / Mapbox / Fulcrum Tile Layer" market place app on dronedeploy
// (url truncated)
var leafletTileLayerUrl = 'https://public-tiles.dronedeploy.com/1494366194_KUJOSCARTOPENPIPELINE_ortho_vdt/{z}/{x}/{y}.png?Policy=.....'
// add custom map layer
L.tileLayer(leafletTileLayerUrl, {
maxZoom: 22,
}).addTo(mymap);
</script>
</body>
</html>
Please go through below basic leaflet code. After many zooms and pull around map its consuming lot of CPU memory.
How can I clear memory after each zoom level.
Please help me out on this.
<link href="css/leaflet.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery.js" type="text/javascript"></script>
<script src="js/leaflet.js"></script>
<style>
#map {
height: 1080px;
width:1920;
}
</style>
</head>
<body>
<div>
<div id="map"></div>
<script>
map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('tiles/{z}/{x}/{y}.png', {
attribution: '© <a>ABCDEFG</a>',
minZoom: 4,
maxZoom: 11,
}).addTo(map);
</script>
</div>
</body>
</html>
Thank you in advance
I am new to leaflet and mapbox. I built a map with with mapbox with my own tiled layers that I made with tilemill exported as mbtiles and extracted with mb-util. Tested from my localhost everything is fine, but when I built the map from my webserver, the layer contents are repeating on each tile when zooming the map. Below is my code. I don't understand this different behaviour and how to avoid this. Can anybody help me, please??
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layers Control</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script type="text/javascript">
var map = L.map('map').setView([50.11, 8.86], 13);
map.setMaxBounds([[50.09, 8.797], [50.134, 8.889]]);
L.control.layers({
'Base Map': L.mapbox.tileLayer('examples.map-9ijuk24y', { noWrap: true }).addTo(map),
'OSM': L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: '© ' + 'OpenStreetMap' + ' Contributors', noWrap: true
})
}, {
'NEG Dietesheimer Steinbrüche': L.tileLayer('tiles/leafNegGrenz/{z}/{x}/{y}.png', { maxZoom: 19, minZoom: 0, noWrap: true }).addTo(map),
'NEG Ausstattung': L.tileLayer('tiles/leafNegAus/{z}/{x}/{y}.png', { maxZoom: 19, minZoom: 0, noWrap: true })
}).addTo(map);
Something is wrong with your server, or the export you created: tiles redirect to each other. For instance, open
http://geo-information.de/tiles/leafNegGrenz/15/17190/11098.png
In a browser, and it redirects to
http://geo-information.de/tiles/leafNegGrenz/15/17190/11096.png
This is why tiles are repeating.