Good morning,
I modified one of the Mapbox GLJS coded examples with my custom data.
I am still not able to display the content of my layers.
It is supposed to update the chloropleth by zooming.
I received a lot of help from the customer support but to no avail so far.
I am not the most talented developer out there!
Here the link of the Mapbox example I used.
(https://www.mapbox.com/mapbox-gl-js/example/updating-choropleth/)
Here also a JSfiddle link to the modified example.
(https://jsfiddle.net/2fe3emd6/28/)
The modified code is the following one.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Update a choropleth layer by zoom level</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.legend {
background-color: #fff;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 1;
}
.legend h4 {
margin: 0 0 10px;
}
.legend div span {
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
</style>
<div id='map'></div>
<div id='zoneveg-legend' class='legend' style='display: none;'>
<h4>Zone de végétation</h4>
<div><span style='background-color: #B8B2B2'></span>Zone arctique</div>
<div><span style='background-color: #539140'></span>Zone boréale</div>
<div><span style='background-color: #7FDA10'></span>Zone tempérée nordique</div>
</div>
<div id='dombio-legend' class='legend' style='display: none;'>
<h4>Domaine bioclimatique</h4>
<div><span style='background-color: #C3C4C1'></span>Toundra arctique herbacée</div>
<div><span style='background-color: #696C6C'></span>Toundra arctique arbustive</div>
<div><span style='background-color: #9A7BA1'></span>Toundra forestière</div>
<div><span style='background-color: #C48D99'></span>Pessière à lichens</div>
<div><span style='background-color: #A9ACCA'></span>Pessière à mousses</div>
<div><span style='background-color: #6895BC'></span>Sapinière à bouleau blanc</div>
<div><span style='background-color: #81BC84'></span>Sapinière à bouleau jaune</div>
<div><span style='background-color: #EFCE6D'></span>Érablière à bouleau jaune</div>
<div><span style='background-color: #B3AC7E'></span>Érablière à tilleul</div>
<div><span style='background-color: #E1779B'></span>Érablière à caryer cordiforme</div>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2FtZiIsImEiOiJjaWZ3bGhtdjgzMnN1dWdrcnEwZTVieG91In0.DkCY-91coDahKvpH7Z26dw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-72, 48],
minZoom: 2,
zoom: 3
});
var zoomThreshold = 4;
map.on('load', function() {
map.addSource('zone', {
'type': 'vector',
'url': 'mapbox://thematix.dy544jx6'
});
map.addLayer({
'id': 'NOM',
'source': 'zone',
'source-layer': 'zone_veg-9z9soa',
'maxzoom': zoomThreshold,
'type': 'fill',
'paint': {
'fill-color': [
'match',
['get', 'NOM'],
'', '#FFFFFF',
'Boréale', '#539140',
'Golfe du Saint-Laurent', '#90C4FF',
'Zone articque', '#B8B2B2',
'Tempérée nordique', '#7FDA10'
],
'fill-opacity': 0.75
}
}, 'waterway-label');
map.addSource('dom', {
'type': 'vector',
'url': 'mapbox://thematix.60h9x8bk'
});
map.addLayer({
'id': 'NOM',
'source': 'dom',
'source-layer': 'dom_bio-9xc27o',
'maxzoom': zoomThreshold,
'type': 'fill',
'paint': {
'fill-color': [
'match',
['get', 'NOM'],
'Toundra arctique herbacée', '#C3C4C1',
'Toundra arctique arbustive', '#696C6C',
'Toundra forestière', '#9A7BA1',
'Pessière à lichens', '#C48D99',
'Pessière à mousses', '#A9ACCA',
'Sapinière à bouleau blanc', '#6895BC',
'Sapinière à bouleau jaune', '#81BC84',
'Érablière à bouleau jaune', '#EFCE6D',
'Érablière à tilleul', '#B3AC7E',
'Érablière à caryer cordiforme', '#E1779B'
],
'fill-opacity': 0.75
}
}, 'waterway-label');
});
var zonevegLegendEl = document.getElementById('zoneveg-legend');
var dombioLegendEl = document.getElementById('dombio-legend');
map.on('zoom', function() {
if (map.getZoom() > zoomThreshold) {
zonevegLegendEl.style.display = 'none';
dombioLegendEl.style.display = 'block';
} else {
zonevegLegendEl.style.display = 'block';
dombioLegendEl.style.display = 'none';
}
});
</script>
</body>
</html>
Thanking you in advance.
Pierre-Y. Plourde
The match expression you are using for both custom layers is missing the default value which is not optional.
Docs: https://www.mapbox.com/mapbox-gl-js/style-spec#expressions-match
Here is an updated jsfiddle which is using rgba(0,0,0,0) as default value for both match expressions.
https://jsfiddle.net/2fe3emd6/35/
E.g. for the layer with ID ZONE_VEG it looks like this:
'fill-color': [
'match',
['get', 'NOM'],
'', '#FFFFFF',
'Boréale', '#539140',
'Golfe du Saint-Laurent', '#90C4FF',
'Zone articque', '#B8B2B2',
'Tempérée nordique', '#7FDA10',
'rgba(0,0,0,0)'
],
You are of course free to use a different default value.
Edit:
The cause for the further issue mentioned in your comment (the first layer is hidden by the second layer) is that both layers are having the same zoom extend. To fix it, just change for the layer with ID 'DOM_BIO' the 'maxzoom' to 'minzoom'.
Updated jsfiddle:
https://jsfiddle.net/2fe3emd6/43/
Related
When I make request I get this.
I want the html to load and the run the scripts to create the full body before I parse it.
I working with flutter(dart).
I tried using the webview but I'm not getting the html from after the page is loaded.
When I make the request to the site, this is what the response looks like.
I need some help guys.
How should I go about it?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Just a moment...</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #ffffff;
color: #000000;
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.7em;
-webkit-font-smoothing: antialiased;
}
h1 {
text-align: center;
font-weight: 700;
margin: 16px 0;
font-size: 32px;
color: #000000;
line-height: 1.25;
}
p {
font-size: 20px;
font-weight: 400;
margin: 8px 0;
}
p,
.attribution,
{
text-align: center;
}
#spinner {
margin: 0 auto 30px auto;
display: block;
}
.attribution {
margin-top: 32px;
}
#keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#-webkit-keyframes fader {
0% {
opacity: 0.2;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.2;
}
}
#cf-bubbles>.bubbles {
animation: fader 1.6s infinite;
}
#cf-bubbles>.bubbles:nth-child(2) {
animation-delay: .2s;
}
#cf-bubbles>.bubbles:nth-child(3) {
animation-delay: .4s;
}
.bubbles {
background-color: #f58220;
width: 20px;
height: 20px;
margin: 2px;
border-radius: 100%;
display: inline-block;
}
a {
color: #2c7cb0;
text-decoration: none;
-moz-transition: color 0.15s ease;
-o-transition: color 0.15s ease;
-webkit-transition: color 0.15s ease;
transition: color 0.15s ease;
}
a:hover {
color: #f4a15d
}
.attribution {
font-size: 16px;
line-height: 1.5;
}
.ray_id {
display: block;
margin-top: 8px;
}
#cf-wrapper #challenge-form {
padding-top: 25px;
padding-bottom: 25px;
}
#cf-hcaptcha-container {
text-align: center;
}
#cf-hcaptcha-container iframe {
display: inline-block;
}
</style>
<meta http-equiv="refresh" content="35">
<script type="text/javascript">
//<![CDATA[
(function(){
window._cf_chl_opt={
cvId: "2",
cType: "non-interactive",
cNounce: "86849",
cRay: "6a97b753b854da86",
cHash: "31c7b92e6efc7fe",
cPMDTk: "",
cFPWv: "b",
cTTimeMs: "1000",
cRq: {
ru: "aHR0cHM6Ly9nZy5jby51ay9yYWNpbmcvMjctb2N0LTIwMjEvZmFrZW5oYW0tMTI1NQ==",
ra: "UG9zdG1hblJ1bnRpbWUvNy4yOC40",
rm: "R0VU",
d: "kPxE7HAIMaSY0+Q26IXxpuTBsg9MYQ7J/ICHGaynkKTojWIXlwrmVPwT+F9kXDNE8Jc60RxAMi3ET5lG3UfaNS8h7kz8aJbykZ4EwheY/kJcnVBvvndt9WGhXuDvU0FOh9cZ9SAgRuYgtmkn+hRxxi5owt/uhRmgg5MfZWETvbbMY/jCMrFpPhenjJFusWE1eM0Uz1E7p5hOK/W9P9wDRmC4A8f4z9PTWHMJY6EjsHR5GNEOZzHvWUd5uKRmIbQxylvGKD8smzOR1mUYrI+hlAUB8U6wptxbbpDZDcxkEYk7M/bp4oIkQrJNBkPvVGmnVcBvZN2QrSJdUIVFNA9kjKh4AfzpxPMkfqhoJIXOhMQK+lr1R7T3wHf/qRMpzvgN5HD8wSySaGq+ZMUraHmms1bvI3p25Ril83l3CvfGA573nzB0Pl9wBt1Ilj+et9TonO/yCPUT9ncqu/HsuK6zoTsYs1XO9emsj8iGHyH20tEDL/QIQu0Xm+Na2nREmz4LLYNg/y/S/IlGc8LjDv548dVWGJxGuPSzeDWod49nzqXZR6u4otbfcHIIMdEgPjTa",
t: "MTYzNjEzMjQ0Mi4yMDcwMDA=",
m: "UHh8TWbrY8rIVckQYr2DEHf3xtqOy3IWbHpurhKo0Dg=",
i1: "bPb8laPvucq92fuTb8UHJQ==",
i2: "uyNfsEipqDYhS6+qFdYUkA==",
zh: "C039uzYEN6IwJDV7FwZVYsBSveHeK850qjEkkfVJ6vw=",
uh: "q2fUGDQwB25BKEmSOHJOj1NUZxjS6q3TVwtPqObOVZM=",
hh: "nfF1CEMggKTkMnWiuwyIjIi54NW2HaYcu4gV2CdK4ks=",
}
}
window._cf_chl_enter = function(){window._cf_chl_opt.p=1};
})();
//]]>
</script>
</head>
<body>
<table width="100%" height="100%" cellpadding="20">
<tr>
<td align="center" valign="middle">
<div class="cf-browser-verification cf-im-under-attack">
<noscript>
<h1 data-translate="turn_on_js" style="color:#bd2426;">Please turn JavaScript on and reload the
page.</h1>
</noscript>
<div id="cf-content" style="display:none">
<div id="cf-bubbles">
<div class="bubbles"></div>
<div class="bubbles"></div>
<div class="bubbles"></div>
</div>
<h1><span data-translate="checking_browser">Checking your browser before accessing</span>
gg.co.uk.</h1>
<div id="no-cookie-warning" class="cookie-warning" data-translate="turn_on_cookies"
style="display:none">
<p data-translate="turn_on_cookies" style="color:#bd2426;">Please enable Cookies and reload
the page.</p>
</div>
<p data-translate="process_is_automatic">This process is automatic. Your browser will redirect
to your requested content shortly.</p>
<p data-translate="allow_5_secs" id="cf-spinner-allow-5-secs">Please allow up to 5
seconds…</p>
<p data-translate="redirecting" id="cf-spinner-redirecting" style="display:none">
Redirecting…</p>
</div>
<form class="challenge-form" id="challenge-form"
action="/racing/27-oct-2021/fakenham-1255?__cf_chl_jschl_tk__=I4acmyvWUrWbLXAGjYC5HXUh31EzMntIEES9DIs8Yg8-1636132442-0-gaNycGzNBmU"
method="POST" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="md" value="WYgGQTwD0.PlAYN7zN9M7XpYgnUJxpt6W_rYCboneoQ-1636132442-0-AfDISHvT2GBIpWp1EPYu9cdxCuFQpLT_u7UKTH9TL-mj0X8Xxw9raGV2KUlDtB4DX7Z3h-LYRsfmLlNmrV-WstInbyHg2H3gWXOuMU2mnguq0TdSnDmB0MWffohG7RydsDYePGxxBYBAXhJMAYyRLWlbcprMPKCaHVm9zAxWf5tZFgYfCLP-CLdoXXS_HuKNhA0iXqanK-LYFcSJXKuvTr0M7oAx-vhljyX8JW3sJ2sgJlV7vLLB9MPl3l7WgWBZ4q0bW8KKVhNi3WXReGdIZUpIirNA6D2xHAe5oyfDMqUfEyopDE2EFGeNxKb2yI0qPvmmaup4WjHIG0DangljT0VcnK8oR2-lz7tVreiQQS50DcnX_EiDswWlbfXDvz83RI3IDOmSjBJXQZBSClMjhkCPs9yf5wOGXtq2jjd2sIFFWgw3zS5Q0n9dsTfFCNSFRGtOtHmCM2ztI8ivbpfvf27CNK55Xb7b2BPCOICarJUqM16ELz7AAQ6lS0OJymzCU0G1eC58DDvCiMCx6AC7nAI2ce38OjfjYHO5Wq_lI8u8VFrGaS4nZyySvn6-0gGqRA" />
<input type="hidden" name="r" value="i7Mahy4asxjhgyvRAVdQk8RCAO5shxagJMSNb2vkdXM-1636132442-0-Acl9elCj95M0xGc183cGdekXyIhJ+RXABhl9YAfeIxJZd5a0u4EX8e1wb7wJdeYsBwO/e42SiuMP3O5t3PoeEibaVnEIPnLgipqmvVXoSiOuK302AlzY5JmI0Xy80sRBsoyWLglYAEPZft7cFoS+XK3ayn3GMqgoQpnf8nhjeVmOx6g1v25gqwGYoz6MdvE/7Z2GAwvCnqP2Bk7fjp7gBBQ1pWSgzCEP2jXsbYuqcBE7HHlNbMyJF1tqOIAd1Hm7S8KtAQUllGHNfJy7s/L6Ibvg55SCP8XHUlAqASeMvqbJors5HimAx+iZgpjfYhetytGpQTqh8m7BlVyZBUkvVl6HA3r0eR0OSVOOUf/8BmuYTMrZKqkElg+BY4sNTy0UqLeuyLH5RS3zMLdNDx75IkGexDVPx2KXBxPwdmPhVO2jmoJdSl+ocBTzfPqjsXw+XAyo9Sm5id7TZ/Z+xxXYA2RMCpBiGBXPdfu2U+CJI4/S/6TWfmunwpMwRIfEby1fQNmvNCJWJPIybXpZR0tOH/eln7CoeR8qaSrCUjP7H5fNSgiIi/gtH2oxm3D20y5T4Hd1EGEtKf0E1pLUGSeZY8LBsIMtvPlnXr5srsz4965+WZu87RK9w8filse+9rtIT6KM55QcgIE7Cvb4yfI74x7y+uJ0bjUoc8D3ke5GjK4isNsMlh0kxgY9gVJmzxReZ9n9ahT77FOcOJh8eQEQOCPZQ8J9DqUduOkH7775AvPseKj1CPb3+++EJvoaZGdNIfYvUV6PjMAsnthNOaCKDQ8oHiYZLW8A8YxF2AUrQxMBGjeIjvv8OCAkFwk4RhX/JSqNXgWE+mj6x+ySSNFtBJp7cOEdB27Teyx11ImRvTXBZdv09XFIgYRO7WYmI/1sB/qfn65uL1Pr0chh5mCX8FgX1r/CRw/IkvJhLpDPNxq0MiXJK/gUuZK7URNCQI3ep+Dv+7lyuvi9sQgkXl2ne8fSp8Nbh3MogLWFAYx0o7Jz1iZY4Vtryw87I+e6Ditw9eklqURwEiSE7yIJ5foZGLZwClJs9W1pfpZ2G2OIU8HBvN/O4ERCqT2nLRVJH513AUzPv9DpowCMUxANLCAIvJL9XmSbVeUBvUQmdpOK+grZlgFRx6d8/kKepJStd8iuN/P9SGFPmOGKQHmECFiu70JPk4QCS3J08BjhuIpC4uvfLNmAzQi1yYEOpwSfv1XPf4DLS/GO59qg/jbgu0UZyRBQDL/KE4wOiE8Dtw7ACjkUtaON1NDgOS5nKkUu0diqIIRvreQdLCy4ehjuvG7LuWPPdrEmU4ZYS3R+IPHNBEBbak2pszPGm8Xc0GtVWldmtAeRr+sN0K8JeRPIbORtPuhwMPpGGosCiPmqxHshlyS0qPB0kYsykHvjDXzI63E3EccRyo353ByRSLe0wcz0k32Ku4I7uDGN/YmQEcggLEVsShXXUFA+FOgQzuM6PE9o+NPgke/M1mJBIuyyOrBtQFNskIgXQA0jPVVpJz84OeR3ylkTsVDGOvnhj5nYPEk27gDxHVoYc2C6Omi/FwRaZcGQrBrTxCTejlnmEnGTUd+M"/>
<input type="hidden" value="3734809bfba8e7119ff4a9e747f0a631" id="jschl-vc" name="jschl_vc"/>
<!-- <input type="hidden" value="" id="jschl-vc" name="jschl_vc"/> -->
<input type="hidden" name="pass" value="1636132443.207-qh8v/uVVqU"/>
<input type="hidden" id="jschl-answer" name="jschl_answer"/>
</form>
<script type="text/javascript">
//<![CDATA[
(function(){
var a = document.getElementById('cf-content');
a.style.display = 'block';
var isIE = /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
var trkjs = isIE ? new Image() : document.createElement('img');
trkjs.setAttribute("src", "/cdn-cgi/images/trace/jschal/js/transparent.gif?ray=6a97b753b854da86");
trkjs.id = "trk_jschal_js";
trkjs.setAttribute("alt", "");
document.body.appendChild(trkjs);
var cpo=document.createElement('script');
cpo.type='text/javascript';
cpo.src="/cdn-cgi/challenge-platform/h/b/orchestrate/jsch/v1?ray=6a97b753b854da86";
document.getElementsByTagName('head')[0].appendChild(cpo);
}());
//]]>
</script>
<div id="trk_jschal_nojs"
style="background-image:url('/cdn-cgi/images/trace/jschal/nojs/transparent.gif?ray=6a97b753b854da86')">
</div>
</div>
<div class="attribution">
DDoS protection by <a rel="noopener noreferrer" href="https://www.cloudflare.com/5xx-error-landing/"
target="_blank">Cloudflare</a>
<br />
<span class="ray_id">Ray ID: <code>6a97b753b854da86</code></span>
</div>
</td>
</tr>
</table>
</body>
</html>
try to move <script> at the top of your app
I used the flutter WebView and it worked.
I wrote the full js script in a file.
The script does the parsing and returns the required data as json.
So I pass the script file content to my WebView controller's evaluateJavaScript and the result will be json. So I can just take that data and work with it.
// webview's controller
WebViewController? _controller;
// setup your webview and get the controller
WebView(
initialUrl: widget.url ?? 'https://www.google.com.tr',
onWebViewCreated: (controller) => _controller = controller,
javascriptMode: JavascriptMode.unrestricted,
gestureNavigationEnabled: true,
onPageFinished: (_) => readJS(),
);
//
void readJS() async {
String js = await fileReader.readFile("lib/js/main.js"); // read script file
String data = await _controller!.evaluateJavascript(js);
print("data\n$data");
}
check out the full code here
I am new to Leaflet and JavaScript. I am trying to create a web map that will have 3-4 buttons that when clicked will zoom the user to the given location. Ex: Disney World (28.385384005128767, -81.56313371302178), Black Pool Pleasure Beach (53.937909193096296, -3.0415772052368952).
So far, I have been trying code from a tutorial, but cannot get the buttons to show on my map. What am I doing wrong?
.full {
padding: 0;
margin: 0;
}
.full html, body, #map {
height: 100%;
width: 100vw;
}
.center {
text-align: center;
}
html, body, #map {
height: 100%;
width: 100vw;
}
#map{ width: 100%; height: 100%; }
iframe{
align-content: center;
width: 98%; height: 97%;
}
.leaflet-bar button,
.leaflet-bar button:hover {
background-color: #fff;
border: none;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar button {
background-position: 50% 50%;
background-repeat: no-repeat;
overflow: hidden;
display: block;
}
.leaflet-bar button:hover {
background-color: #f4f4f4;
}
.leaflet-bar button:first-of-type {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar button:last-of-type {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar.disabled,
.leaflet-bar button.disabled {
cursor: default;
pointer-events: none;
opacity: .4;
}
.easy-button-button .button-state{
display: block;
width: 100%;
height: 100%;
position: relative;
}
.leaflet-touch .leaflet-bar button {
width: 30px;
height: 30px;
line-height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="Leaflet.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body id ="full" class= "full">
<div id = "text">
</div>
<div id="map"></div>
<script>
var map = L.map('map',{ center: [42.353770, -71.10360608], zoom: 16, keyboard: true});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo(map);
var mapChoices = {
"Satellite": Esri_WorldImagery,
"OSM": OSM
}
L.control.layers(mapChoices).addTo(map);
</script>
<script>
var map = L.map('map', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(zoomTo);
L.easyButton( 'fa-gbp', function(){
map.setView([55, -2], 4);
}).addTo(map);
L.easyButton( 'fa-jpy', function(){
map.setView([38, 139], 4);
}).addTo(map);
L.easyButton( 'fa-usd', function(){
map.setView([37.8, -96], 3);
}).addTo(map);
</script>
</body>
</html>
Simply do not re-instantiate your map and do not re-assign your map variable.
You can merge your 2 <script> tags together, it should become more obvious to you what the issue is.
Your 2nd map instantiation should throw an error in your browser Devtools console (if you are not using it, make sure to learn how to open it)
After that the rest of your script is ignored.
I am trying to add a TIF file to my Mapbox GL JS code which is in html. I haven't found any relevant solution as to how I can add the file to my html code. Can anyone please tell me how to solve this? I need to upload the Georeferenced TIF file to my map in Mapbox GL JS.
Should I convert the TIF file to some other format? It will be better for me if I can upload the whole TIF file to Mapbox.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change a map's style</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style type='text/css'>
#info {
display: block;
position: relative;
margin: 0px auto;
width: 30%;
padding: 8px;
border: none;
border-radius: 3px;
font-size: 14px;
text-align: center;
color: #222;
background: #fff;
}
</style>
<style>
#menu {
position: absolute;
background: #fff;
padding: 10px;
font-family: 'Open Sans', sans-serif;
}
</style>
<div id='map'></div>
<div id='menu'>
<input id='streets-v11' type='radio' name='rtoggle' value='streets' checked='checked'>
<label for='streets'>streets</label>
<input id='light-v10' type='radio' name='rtoggle' value='light'>
<label for='light'>light</label>
<input id='dark-v10' type='radio' name='rtoggle' value='dark'>
<label for='dark'>dark</label>
<input id='outdoors-v11' type='radio' name='rtoggle' value='outdoors'>
<label for='outdoors'>outdoors</label>
<input id='satellite-v9' type='radio' name='rtoggle' value='satellite'>
<label for='satellite'>satellite</label>
</div>
<pre id='info'></pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2lmYXQ1NzciLCJhIjoiY2p6dXNvN3ZnMGVqZTNjcDRrNWNqcTE5byJ9.Bg8-lwZjjNoswew2k1w2RA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
zoom: 13,
center: [90.3897, 23.7270]
});
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());
//for displaying the latlon of mouse curson in map
map.on('mousemove', function (e) {
document.getElementById('info').innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// to the top-left corner of the map
JSON.stringify(e.point) + '<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
});
var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');
function switchLayer(layer) {
var layerId = layer.target.id;
map.setStyle('mapbox://styles/mapbox/' + layerId);
}
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = switchLayer;
}
</script>
</body>
</html>
One way to do this (as you spoke about) is to convert the georeferenced image to another format. Here is an example of how to add a georeferenced image, as long as you know the geographic bounds :
map.addSource("myImageSource", {
"type": "image",
"url": "test.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
You can also see https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/ for more reference material.
While i am upgrading my polymer project to 2.0 at very first element i am getting the error
Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent
I tried the element in both hybrid style and 2.0 style.
Here is my element code
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<!--<link rel="import" href="../../bower_components/paper-material/paper-material.html">-->
<!--<link rel="import" href="../../bower_components/paper-input/paper-input.html">-->
<!--<link rel="import" href="../../bower_components/paper-button/paper-button.html">-->
<!--<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">-->
<!--<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="import" href="../../elements/elements.html">
<!--<script src="https://apis.google.com/js/platform.js"></script>-->
<!--<meta name="google-signin-client_id" content=" 747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com">-->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<dom-module id="log-in">
<template>
<custom-style>
<style>
#card{
width: 50%;
height: 50%;
padding-top: 25%;
padding-left: 25%;
}
#media (max-width:425px) {
paper-material {
width: 80%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
/*padding-top: 14%;*/
color: rgb(63,81,181);
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 4%;
}
.logoAndHead{
padding-left: 23%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 9%;
}
}
#media (min-width: 426px) {
paper-material {
width: 50%;
/*box-shadow: 0 4px 8px 1px rgba(19, 17, 17, 0.2);*/
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
.loginHead{
color: rgb(63,81,181);
/*padding-top: 9%;*/
font-weight: bold;
font-size: large;
align-self: flex-start;
padding-left: 2%;
}
}
#media (min-width: 426px)and (max-width: 1000px){
.logoAndHead{
padding-left: 33%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 7%;
}
}
#media (min-width: 1001px) and (max-width: 2000px){
.logoAndHead{
padding-left: 37%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 5%;
}
}
#media (min-width: 2001px) {
.logoAndHead{
padding-left: 45%;
padding-top: 4%;
/*line-height: 3em;*/
}
.headText{
padding-top: 2%;
}
}
.egluImg{
/*float: left;*/
}
.egluImg>img{
height: 45px;
width: 51px;
}
paper-input{
width: 100%;
}
paper-button{
color: white;
background-color:rgb(63,81,181) ;
}
.logo{
padding-bottom: 4%;
}
a{
color: rgb(107, 106, 106);
}
.loginText{
color: rgb(63,81,181);
font-size: large;
font-weight: bolder;
align-self: flex-end;
padding-left: 2%;
}
img{
vertical-align: middle;
}
</style>
</custom-style>
<div class="loginContainer">
<paper-material elevation="1">
<div class="logo">
<div class="logoAndHead">
<span class="egluImg" style="float: left">
<img src="../../images/eglu-logo.jpg" >
</span>
<div class="layout horizontal wrap headText">
<span class="loginHead">
<img src="../../images/logo_text.svg" >
</span>
<span class="loginText">Login</span>
</div>
</div>
<!--<center>-->
<div style="padding-left: 8%;padding-right: 8%">
<paper-input label="User Name" value="{{userName}}"></paper-input>
<paper-input type="password" on-keypress="enterAccount" id="password" label="Password" value="{{password}}"></paper-input>
<!--<i class="material-icons" on-click="_showHide" id="eye">visibility_off</i>-->
<div>
<paper-button id="loginButton" raised on-click="sendRequest">Log in</paper-button>
</div>
<div style="padding-top: 2px">
Forgot Password?
<br>
</div>
</div>
<!--</center>-->
<!--<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>-->
</div>
</paper-material> <!--<google-signin client-id="747808193563-6knu1uvmnmqdud0hojtv538npq6pliaj.apps.googleusercontent.com" scopes="https://www.googleapis.com/auth/drive"></google-signin>-->
</div>
<div style="text-align: center">
<paper-toast id="errToast"></paper-toast>
</div>
<!--<google-signin-aware-->
<!--id="signin"-->
<!--on-click="_googleSignIn"-->
<!--scopes="https://www.googleapis.com/auth/drive"-->
<!--on-google-signin-aware-success="handleSignin"-->
<!--google-signin-aware-error="handleError">-->
<!--</google-signin-aware>-->
<iron-ajax
id="authenticate"
method="POST"
content-type="application/json"
url="https://staging.myeglu.com/api/v1/customers"
body="{{ajaxBody}}"
handle-as="json"
last-response="{{code}}"
on-error="_handleError"
on-response="_handleResponse">
</iron-ajax>
</template>
<script>
class LogIn extends Polymer.Element{
static get is() {
return "log-in";
}
static get properties() {
return {
userName:{
type:String,
value:'',
notify:true
},
password:{
type:String
},
code:{
type:Object,
notify:true
},
ajaxBody: {
type: String,
computed: 'processBody(userName, password)'
},
integrator:{
type:String,
notify:true,
computed:'setIntegrator(userName)'
},
gResponse:Object
}
}
constructor() {
super();
}
ready(){
super.ready();
}
handleSignin(response){
var user = gapi.auth2.getAuthInstance()['currentUser'].get();
console.log('User name: ' + user.getBasicProfile().getName());
console.log('User token: ' + response.detail.id_token);
}
handleError(){
}
sendRequest(){
// this.$.authenticate.headers={"clientid":"web"};
this.$.authenticate.generateRequest();
}
_showHide(){
var p = this.$.password;
var q=p.getAttribute('type');
if(q=='text'){
p.setAttribute('type','password');
this.$.eye.innerHTML = '<i class="material-icons">visibility_off</i>';
}
if(q=='password'){
p.setAttribute('type','text');
this.$.eye.innerHTML = '<i class="material-icons">visibility</i>';
}
}
processBody(userName, password) {
return JSON.stringify({emailId: userName, password: password,authProvider: "INTERNAL"});
}
_handleResponse(e){
console.log('status'+e.detail.xhr.status);
if(this.code.message=="Login Success"){
var expiry = new Date();
expiry.setTime(expiry.getTime()+(15*24*60*60*1000)); // one week
console.log('it is called');
this.setCookie('token',this.code.token,15);
this.setCookie('loggedIn','yes',15);
this.setCookie('email',this.userName,15);
window.location.href = "/admin/";
// window.location.href = "/";
}
else
window.alert('wrong credentials, Try again');
}
_handleError(e){
if(e.detail.request.xhr.response.message=='Wrong password') {
this.$.errToast.text = 'Wrong Password';
this.$.errToast.show();
}
if(e.detail.request.xhr.response.loginState=='ACCOUNT_NOT_FOUND') {
this.$.errToast.text = 'You are not eGlu User or check your credentials';
this.$.errToast.show();
}
}
setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
setIntegrator(userName){
return userName;
}
onSignIn() {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
window.location.href = "../../index.html";
}
onFailure(error) {
alert(error);
}
renderButton () {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
enterAccount(event) {
if (event.keyCode == 13) {
this.$.loginButton.click();
}
}
}
customElements.define(LogIn.is, LogIn);
</script>
</dom-module>
i have been fighting with this problem for days, someone help me solve it.
Thanks in advance.
There's an example of how to make a point draggable (which has a layer) and there's an example of how to setup a marker with a custom image, but how would I make that custom image draggable on the map when it doesn't have a layer associated with it?!
i came up with this from some another example i found, and mixed the two. It worked for what i wanted... I remember seeing this while looking for answers (a few times) so i came back to share.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#marker6060 {
background-image: url('https://placekitten.com/g/60/60/');
background-size: cover;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
}
#marker5050 {
background-image: url('https://placekitten.com/g/50/50/');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
#marker4040 {
background-image: url('https://placekitten.com/g/40/40/');
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
element: element6060,
draggable: true,
color: '#000000'
})
.setLngLat([-66.324462890625, -16.024695711685304])
.addTo(map);
element6060.addEventListener('click', function() {
var message = 'Kitty 6060';
window.alert(message);
});
var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
element: element5050,
draggable: true,
color: '#000000'
})
.setLngLat([-61.2158203125, -15.97189158092897])
.addTo(map);
element5050.addEventListener('click', function() {
var message = 'Kitty 5050';
window.alert(message);
});
var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
element: element4040,
draggable: true,
color: '#000000'
})
.setLngLat([-63.29223632812499, -18.28151823530889])
.addTo(map);
element4040.addEventListener('click', function() {
var message = 'Kitty 4040';
window.alert(message);
});
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers No Layer, Draggable</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#marker6060 {
background-image: url('https://placekitten.com/g/60/60/');
background-size: cover;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
}
#marker5050 {
background-image: url('https://placekitten.com/g/50/50/');
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
#marker4040 {
background-image: url('https://placekitten.com/g/40/40/');
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'YOURS, NOT MINE.';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-65.017, -16.457],
zoom: 5
});
var element6060 = document.createElement('div');
element6060.id = 'marker6060';
var marker6060 = new mapboxgl.Marker({
element: element6060,
draggable: true
})
.setLngLat([-66.324462890625, -16.024695711685304])
.addTo(map);
element6060.addEventListener('click', function() {
var message = 'Kitty 6060';
window.alert(message);
});
var element5050 = document.createElement('div');
element5050.id = 'marker5050';
var marker5050 = new mapboxgl.Marker({
element: element5050,
draggable: true
})
.setLngLat([-61.2158203125, -15.97189158092897])
.addTo(map);
element5050.addEventListener('click', function() {
var message = 'Kitty 5050';
window.alert(message);
});
var element4040 = document.createElement('div');
element4040.id = 'marker4040';
var marker4040 = new mapboxgl.Marker({
element: element4040,
draggable: true
})
.setLngLat([-63.29223632812499, -18.28151823530889])
.addTo(map);
element4040.addEventListener('click', function() {
var message = 'Kitty 4040';
window.alert(message);
});
</script>
</body>
</html>
</script>
</body>
</html>