I'm using leaflet.js and adding a Fulcrum Mapbox tile layer URL to load a specific map into my website... The tiles load in circles and I'm not sure whats going on! Any help would be awesome.
Image of the resulting tiles:
Here is my code:
var backgroundLayer = L.tileLayer("https://api.mapbox.com/styles/v1/measure/ck8515ktb01vd1ilngup1r6rr/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1IjoibWVhc3VyZSIsImEiOiJjanV6dW00NjIxY3liNDNwZnc4eWozbjY0In0.zj7VWavAGgdjQpOwWoXDqA",{
minZoom: 2,
maxNativeZoom: 22,
maxZoom: 22,
});
var map = L.map("mymap");
map.setView([35, -95], 14);
map.addLayer(backgroundLayer);
It is working as expected. Maybe there is a conflict with a css from some other library you use or there is an error somewhere else in your code.
Here is how it should be:
<!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.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>
</head>
<body>
<div id="mymap" style="width: 600px; height: 100vh;"></div>
<script>
var backgroundLayer = L.tileLayer("https://api.mapbox.com/styles/v1/measure/ck8515ktb01vd1ilngup1r6rr/tiles/256/{z}/{x}/{y}#2x?access_token=pk.eyJ1IjoibWVhc3VyZSIsImEiOiJjanV6dW00NjIxY3liNDNwZnc4eWozbjY0In0.zj7VWavAGgdjQpOwWoXDqA", {
minZoom: 2,
maxNativeZoom: 22,
maxZoom: 22,
});
var map = L.map("mymap");
map.setView([35, -95], 9);
map.addLayer(backgroundLayer);
</script>
</body>
</html>
Related
I have a list of points in which I want to iterate and add to leaflet map. I am able to add the points to the maps but when I try to style the text using h1 tags, the style is not applied text from the iteration. From leaflet tutorials I can see that the text in pop up can be styled with header tags. How can i style this text which i am passing to the pop up window through iteration. Below is my sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>
</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
for (let loc of locations){
// console.log(loc[0])
marker = new L.marker([loc[1], loc[2]])
.bindPopup("<h1> loc[0] </h1> ")
.addTo(map);
}
</script>
</html>
You can use HTML tags within the bindPopup method.
For example:
locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});
This will add an h1 element around the location name within the popup.
For styling h1 element using CSS:
h1 {
color: red;
}
Based on the answer provided by #divyavinod6, I changed the for to forEach to perform the iteration. The forEach allows running function on the iteration element. below is the full code if it will be useful for someone else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="customstyle.css"> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>
</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});
</script>
</html>
I use leaflet map ,this map can show my location (I success)
I hope I can update my location 10 second a time (just this div field, other data not to update)
but now I just can update hole page to update my map, how can I do to update partial page?
this is my code:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<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>
<?php
$num=0;
?>
<body >
<div id="mapid6" style="width: 600px; height: 600px;"></div>
<?php
ini_set('date.timezone','Asia/Taipei');
$sdate = date("Y~m~d");
$stime = date("h~m");
$car_id=array( "2010260204");
$url6 = 'http://my_ip:6060/GetGpsHistoryTrack/100?DeviceId='.$car_id[$num].'&BeginTime='.$sdate.'~00~00~00&EndTime='.$sdate.'~23~59~59';
$json6 = file_get_contents($url6);
$arr6 = json_decode($json6, true);
$arr6_2 =$arr6["GpsHistoryTrackInfo"];
$count6=count($arr6_2)-1;
$la6=$arr6["GpsHistoryTrackInfo"][$count6]["la"];
$lo6=$arr6["GpsHistoryTrackInfo"][$count6]["lo"];
?>
<script>
var cars = [ 'KLE-5592'];
var mymap = L.map('mapid6').setView([<?=$la6?>, <?=$lo6?>], 13);
var caricon = L.icon({
iconUrl: 'http://map.chansing.com.tw/car.png',
iconSize: [100, 80],
popupAnchor: [0, -20]
});
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
var marker = L.marker([ <?=$la6?>, <?=$lo6?>], {icon: caricon}).addTo(mymap).bindPopup(cars[<?=$num?>]).openPopup();
setInterval('window.location.reload();',5000);
</script>
</body>
</html>
thanks
It looks difficult to do it directly, you can use jQuery to refresh it at some given time.
Check this link for more information
Hi can i ask how to move the polygon in leaflet ? I have really no idea how to move it since i was using set option {draggable : true }.
Give error : it is not a option.
poly = new L.Polygon([coordinates],
{
color: '#810541',
fillColor: '#D462FF',
fillOpacity: 0.5,
// draggable: true
}).addTo(map)
The output i wish to get is , i can move the polygons and see the coordinates of the polygons.
Any help is appreciate !
Code Demo :
https://jsfiddle.net/wesleylim97/wncy4mk5/6/
Updates :
Problem is solved after added Leaflet.Path.Drag plugin.
Include the script :
<script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag#0.0.6/src/Path.Drag.min.js"></script>
Working Demo :
https://jsfiddle.net/wesleylim97/wncy4mk5/13/
Thanks to #kboul
Use Leaflet.Path.Drag plugin.
Include the script
<script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag#0.0.6/src/Path.Drag.min.js"></script>
<!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.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>
<script src="https://cdn.jsdelivr.net/npm/leaflet.path.drag#0.0.6/src/Path.Drag.min.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map').setView([3.1377736432253345, 101.56585693359375], 10);
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var poly1 = [
[
[3.1377736432253345, 101.56585693359375],
[2.929326028392636, 101.6619873046875],
[3.03629758922721, 101.89544677734375],
[3.247466393872138, 101.8048095703125]
]
]
var polygon = new L.Polygon([poly1], {
draggable: true,
color: '#810541',
fillColor: '#D462FF',
fillOpacity: 0.5,
}).addTo(map);
polygon.on('dragend', function(e) {
console.log(e.target._latlngs[0][0]);
});
</script>
</body>
</html>
I am trying to display the full map using leaflet.
Code Pen
I am trying to achieve the following via leaflet:
I thought using mymap.fitWorld() would achieve the effect but it is not.
You can provide minZoom and maxZoom levels to be 1 like this:
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
and then define setView as follows:
map.setView([0, 0], 0);
<!DOCTYPE html>
<html>
<head>
<title>Zoom Levels Tutorial - 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.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 1,
});
var cartodbAttribution = '© OpenStreetMap contributors, © CartoDB';
var positron = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', ).addTo(map);
map.setView([0, 0], 0);
</script>
</body>
</html>
I created a map with tilemill and then exctracted the tiles with MBUtil.
I'm able to show the tiles properly using Leaflet but i don't succeed using mapbox.js. I'm attaching the code , what I'm doing wrong??
Any help will be appreciated!
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />-->
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
//var tilesUrl = 'http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa- redditi-2012/{z}/{x}/{y}.png',
//tilesLayer = new L.TileLayer(tilesUrl);
//map = new L.Map('map');
//map.addLayer(tilesLayer);
//map.setView(new L.LatLng(39.5,-5.0), 6);
var map = L.mapbox.map('map');
tilesLayer = new L.mapbox.TileLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi- 2012/{z}/{x}/{y}.png" ] ,
"attribution": "franco"
});
tilesLayer.addTo(map);
map.setView(new L.LatLng(39.5,-5.0), 6);
</script>
</body>
</html>
You can try this syntax
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
var map = L.mapbox.map('map');
L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png', {
"attribution": "franco"
}).addTo(map);
map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>
Thank you vey much Selim, it works!
I wanted to go a step forward adding interacativity (the map I created with tilemill is interactive) but I cannot see the tooltips! Perhaps I'm getting the wrong syntax again...
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Quick Start Guide Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width: 1000px; height: 1000px"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<script>
var map = L.mapbox.map('map');
//L.tileLayer('http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa- redditi-2012/{z}/{x}/{y}.png', {"attribution": "franco"}).addTo(map);
L.mapbox.tileLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.png" ] }).addTo(map);
var myGridLayer = L.mapbox.gridLayer({ "tilejson": "2.0.0",
"tiles": [ "http://eccoilmoro.github.io/Mappa-Redditi-IRPEF-2012-/tiles-mappa-redditi-2012/{z}/{x}/{y}.grid.json" ] }).addTo(map);
var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);
map.setView(new L.LatLng(39.5, 9), 6);
</script>
</body>
</html>