I'm using Mapbox for maps, and the access token is public where people visit the website can easily copy. Is there a way to hide this access token or limit access to only my website? It seems other people are using my access code to do Python Requests for geocodes.
<!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.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([40.7127837, -74.0059413]).addTo(mymap)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
var popup = L.popup();
function onMapClick(e) {
L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap)
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(mymap);
}
mymap.on('click', onMapClick);
</script>
</body>
</html>
You could add URL restrictions to your access token:
https://docs.mapbox.com/help/account/tokens/#domain-restrictions
Or you could hide your token with a method like this:
https://www.quora.com/How-do-you-hide-your-API-customer-key-token-when-youre-pushing-code-to-Github
I hope that's helpful!
Related
I am trying to display open radioactivity data from the German Agency for Protection of Radiation (https://www.imis.bfs.de/geoportal/).
They have a nice GeoJson API.
I can display the individual markers (points of radioactivity sensors), but cannot display the value feature.properties.value in a popup.
I tried onEachFeature but somehow it did not work. I searched for quite a bit, but could not find a solution
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radioaktivität</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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<script src="script.js"></script>
</body>
</html>
JavaScript:
let config = {
minZoom: 2,
maxZoom: 18,
};
const zoom = 7;
const lat = 51.7036;
const lng = 10.2166;
const map = L.map("map", config).setView([lat, lng], zoom);
let url = 'https://www.imis.bfs.de/ogc/opendata/ows?service=WFS&version=1.1.0&request=GetFeature&typeName=opendata:odlinfo_odl_1h_latest&outputFormat=application/json';
const response = fetch(url)
.then(response => response.json())
.then(response => {
L.geoJson(response, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.value);
}
}).addTo(map);
});
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...
Consider this code:
L.marker({lat: 30.267222, lon: -97.743056})
.addTo(mymap)
.bindPopup("hello world!")
.on('popupopen', function(e) { alert('this far'); });
When I run it the alert() runs before the popup actually appears. Is there a way to make it so that some javascript code runs after the popup appears?
I ask because I'm trying to run some javascript after the popup appears that'd do stuff to the visible elements. If the popup isn't open when the popupopen event handler runs then that javascript clearly won't work.
Any ideas?
JS Fiddle: https://jsfiddle.net/7qn2dksb/
Thanks!
What about using a short delay using setTimeout?
L.marker({
lat: 30.267222,
lon: -97.743056
})
.addTo(mymap)
.bindPopup("hello world!")
.on('popupopen', function(e) {
setTimeout(() => {
alert('this far');
}, 100)
});
<!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.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>
</head>
<body>
<div id="mapid" style="width: 100%; height: 100vh"></div>
<script>
var mymap = L.map('mapid').setView({
lat: 30.267222,
lon: -97.743056
}, 13);
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',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker({
lat: 30.267222,
lon: -97.743056
})
.addTo(mymap)
.bindPopup("hello world!")
.on('popupopen', function(e) {
setTimeout(() => {
alert('this far');
}, 100)
});
</script>
</body>
</html>
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>
I updated leaflet elevation example gpx just changing the gox name, working locally on win 7 or OS X and Safari or Chrome. Nothing shows up.
var map = new L.Map('map');
var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
attr ='Tiles Courtesy of MapQuest — Map data © OpenStreetMap contributors, CC-BY-SA',
service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});
var el = L.control.elevation();
el.addTo(map);
var g=new L.GPX("./maggiore.gpx", {
async: true,
marker_options: {
startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
}
});
g.on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
});
g.on("addline",function(e){
el.addData(e.line);
});
g.addTo(map);
map.addLayer(service);
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<head>
<title>Leaflet.Elevation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
><script type="text/javascript" src="./lib/leaflet-gpx/gpx.js"></script>
</head>
<body>
<div id="map"></div>
All I get is a grey page with zoom control and an empty diagram
do you have the leaftlet.elevation dist files ?
looking at your example you have :
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
you may copy these files to the lib folder.