I've got a problem reguarding map tiles of leaflet:
when I zoom out, while loading you can clearly see there's another map under the tile I've selected, does anyone know how to possibly fix this?
Here's my code to generate the map:
var map = L.map('map').setView([46.681364, 11.129706], 5);
L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap contributors',
minZoom: 4,
maxZoom: 18
}).addTo(map);
map.setMaxBounds([[-90,-180],[90,180]]);
<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0" style="position: relative;top:0%; outline: none;width:100%;height:88%"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(235px, -53px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 16; transform: translate3d(66px, 244px, 0px) scale(0.25);"></div><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 18; transform: translate3d(0px, 0px, 0px) scale(1);"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(16365px, 10834px, 0px) scale(64);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control">Leaflet | © OpenStreetMap contributors</div></div></div></div>
Related
I need to add my favorite text to middle-top of my map div, so I have:
<div id="map" style="height:300px;">
<div style="width:150px;background-color:red; z-index:1000;"> Hello World !!</div>
</div>
And this is my simplified JS code:
<script>
$(document).ready(function () {
var Lat = 32.646540;
var Lon = 51.667743;
map = L.map('map').setView([Lat, Lon], 19);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Thanks to OSM',
maxZoom: 19
}).addTo(map);
});
</script>
And the problem is that the Red Text goes behind the map and I can't manage it.
Before loading the map :
After loading the map :
add your Hello World div a higher z-index like z-index: 9999
Update
Now I see it. You add the hello World div as child to the map. You have to add it as sibling.
<div class="box"> Hello World</div>
<div id="map" style="height:300px;"></div>
CSS:
.box{
position: absolute;
top: 0;
z-index: 9999;
text-align: center;
width: 150px;
left: 50%;
margin-left: -75px; /* half of the width */
background-color:red;
}
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.
I am trying to select item from drop down using the code:
var assettype= element(by.model("templateIdTracker"));
if (assettype.isDisplayed()) {
assettype.click();
}
browser.sleep(1000);
element(by.cssContainingText('option', 'A')).click();
I can click the drop down but on trying to select item, it throws error:
"Failed: element not visible: Element is not currently visible and may
not be manipulated"
This is the web page code. Please suggest.
<div class="k-list-container k-popup k-group k-reset k-state-border-up" data-role="popup" style="position: absolute; font-size: 14px; font-family: "Open Sans Light","Helvetica Neue",Helvetica,Arial,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 20px; width: 243.5px; height: auto; display: block; transform: translateY(0px);">
<div class="k-list-optionlabel ng-scope"/>
<div class="k-group-header" style="display:none"/>
<div class="k-list-scroller" unselectable="on" style="height: auto;">
<ul class="k-list k-reset" unselectable="on" tabindex="-1" aria-hidden="false" aria-live="off" data-role="staticlist" role="listbox">
<li class="k-item ng-scope k-state-hover" data-offset-index="0" unselectable="on" role="option" tabindex="-1">A</li>
<li id="1ebaaa3b-8f44-4873-b478-fea6fd498b83" class="k-item ng-scope k-state-selected k-state-focused" data-offset-index="1" unselectable="on" role="option" tabindex="-1">B</li>
<li class="k-item ng-scope" data-offset-index="2" unselectable="on" role="option" tabindex="-1">C</li>
<li class="k-item ng-scope" data-offset-index="3" unselectable="on" role="option" tabindex="-1">D</li>
<li class="k-item ng-scope" data-offset-index="4" unselectable="on" role="option" tabindex="-1">E</li>
<li class="k-item ng-scope" data-offset-index="5" unselectable="on" role="option" tabindex="-1">F</li>
<li class="k-item ng-scope" data-offset-index="6" unselectable="on" role="option" tabindex="-1">G</li>
</ul>
</div>
</div>
</div>
</div>
You could implement helper method to wait for this element to be visible.
Helpers.expectVisible = function (elementLocator, elementDescription) {
var message = null;
if (elementDescription) {
message = elementDescription + ' was not visible';
}
return browser.wait(EC.visibilityOf(elementLocator), WAIT_TIMEOUT, message);
};
you can also try:
assettype.click();
element(by.linkText("A")).click();
The problem is your browser can't see the element, its probably on the bottom of the screen.
You can use the same solution to any element you cant see.
Check my answer here https://stackoverflow.com/a/39074330/1431062
Thanks all!
It simply worked by using 'li' instead of 'option'
element(by.cssContainingText('li', 'A')).click();
instead of element(by.cssContainingText('option', 'A')).click();
assettype= element(by.model("templateIdTracker"));
assettype.click();
browser.sleep(1000);
element(by.cssContainingText('li', 'A')).click();
browser.sleep(2000);
I have issue when use angular-leaflet-directive to create multiple map.
I have list City and i want to use ng-reapeat to display many map.
this is code
<div ng-repeat="(key,city) in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
<div class="panel-heading">{{city.name}}</div>
<div class="panel-body" style="width: 100%; height: 100%;">
<leaflet style="width: 100%; height: 90%;" center="{{city.place_id}}"></leaflet>
</div>
</div>
it alert error Syntax Error: Token '{' invalid key at column 2 of the expression [{{city.place_id}}] starting at [{city.place_id}}].
when i test by change 'center' with other string then It haven't error.
Please help me fix it.
thank you so much !!!!!!!
According to the example in the docs, you must provide a lat, a lng and a zoom in your center property.
So try something like this:
<div ng-repeat="city in listCity" class="panel panel-info col-md-2" style=" height: 25%;">
<div class="panel-heading">{{city.name}}</div>
<div class="panel-body" style="width: 100%; height: 100%;">
<leaflet style="width: 100%; height: 90%;" center="{ lat: city.lat, lng: city.lng, zoom: 10 }"></leaflet>
</div>
</div>
I assume your listCity is an Array.
I ran the MapQuest sample code:
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:10, /*initial zoom level of the map*/
latLng:{lat:39.743943, lng:-105.020089}, /*center of map in latitude/longitude */
mtype:'map', /*map type (map)*/
bestFitMargin:0, /*margin offset from the map viewport when applying a bestfit on shapes*/
zoomOnDoubleClick:true /*zoom in when double-clicking on map*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
});
and generated a map ok. But looking at the HTML generated, it's not clear what the source of the map data is. I was expecting maybe an iFrame, or an image but I don't see either:
<div id="map" style="width: 800px; height: 300px; position: relative;">
<div style="width: 800px; height: 300px; z-index: 0; overflow: hidden; background: none repeat scroll 0% 0% rgb(255, 255, 255); position: relative; top: 0px; left: 0px; cursor: -moz-grab;">
<div class="mqa-display" style="position: absolute; z-index: 0;">
<div class="mqa-zl mqa-zl100 mqa-zlf" style="position: absolute; z-index: 100; cursor: default;">
<div class="mqa-zl mqa-zl0 mqa-zlgl" style="position: absolute; z-index: 0; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl10 mqa-zlf" style="position: absolute; z-index: 22;">
<div class="mqa-zl mqa-zl1000 mqa-zlf" style="position: absolute; z-index: 1000;">
<div class="mqa-zl mqa-zl1000 mqa-zlgl" style="position: absolute; z-index: 1000; left: 400px; top: 150px;">
<div class="mqa-zl mqa-zl5 mqa-zlgl" style="position: absolute; z-index: 5; left: 400px; top: 150px;">
</div>
</div>
</div>
How does that HTML represent a detailed map of Colorado?
Thanks
The map that you see generated by the JavaScript API is created by a set of map image tiles that are downloaded and assembled to create the map. Additional tiles are downloaded as the user pans and zooms in/out.
The map tiles are cached and hosted from various servers located around the world.