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
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>
Not sure how I have managed this but my leaflet zoom controls are not clickable? They do show up on the screen but there is no mouse change when hovering over them.
Do I need to create another layer for the controls or am I missing something else from my code?
update: The map will also not scroll or zoom in - it appears static
This is my script relating to the map:
var mymap = L.map('mapid');
var Jawg_Streets = L.tileLayer('https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token={accessToken}', {
attribution: '© <b>Jawg</b>Maps © OpenStreetMap contributors',
minZoom: 0,
maxZoom: 22,
subdomains: 'abcd',
accessToken: foo
}).addTo(mymap);
mymap.zoomControl.setPosition('bottomleft');
mymap.setView([51.505, -0.09], 13);
Also not sure if it might relate to my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gazetteer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="favicon.ico" rel="icon">
<!--Stylesheets-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<script src="https://use.fontawesome.com/acad2da5ff.js"></script>
</head>
<body>
<div id="mapid" class="container-fluid">
</div>
etc
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton#2/src/easy-button.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js"></script>
<script type="application/javascript" src="js/jquery-2.2.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script type="application/javascript" src="js/script.js"></script>
</body>
</html>
Or CSS
#mapid {
height: 100vh;
z-index: -1;
}
Thanks
Remove the z-index: -1 from the css styling and it should work.
WORKING DEMO
MapPanes - Leaflet Docs
I'm trying to create a small webpage with an Openstreetmap and a icon to get my current position.
Heree is my code, but it's not working and I don't know why (small noob)
Thansk in adavnce for your help.
Best regards
Ossy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css"
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<title>My Openstreetmap Test</title>
</head>
<body>
<style>#mymapid{height:700px;}</style>
<div id="mymapid"></div>
<script>
var mylat = 46.9;
var mylon = 4.6833;
var myzoom = 16;
var mymapid = null;
function initMap() {
var mymap = L.map('mymapid').setView([mylat,mylon], myzoom);
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
attribution: 'données à OpenStreetMap/ODbL - rendu OSM France',
minZoom: 1,
maxZoom: 20
}).addTo(mymap);
var mk = L.marker([mylat,mylon]).addTo(mymap);
var lc = L.control.locate().addTo(mymap);
};
window.onload = function(){
initMap();
};
</script>
</body>
</head>
You have some typos in your html, otherwise this works fine. The last two <link tags are not terminated with /> as they should be and your final tag should be </html> and not </head>
I ran this on Glitch and it worked ok with the typos fixed:
https://glitch.com/~ianc-leaflet2
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>
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>