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
Related
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 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
I'm trying to use a map, but it doesn't seem to work it just shows an empty white space. I hard reseted my pc days ago, so I'm not sure if something is missing in my pc or my code is wrong, but here it is:
header.php:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu_style.css">
<link rel="stylesheet" href="css/index_style.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="css/main.css">
</head>
main.css:
div.mapa{
height: 420px;
}
footer.php:
</footer>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="js/main.js"></script>
</body>
</html>
main.js:
(function(){
"use strict";
document.addEventListener('DOMContentLoaded',function(){
var mapa = document.getElementById('mapa');
if(mapa) {
var map = L.map('mapa').setView([-12.088507, -76.995052], 16);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([-12.088507, -76.995052]).addTo(map)
.bindTooltip('Paris WebCamp 2020<br> Boletos disponibles.')
.openTooltip();
}
});
});
index.php:
<div id="mapa" class="mapa"></div>
After everything... it doesnt show, it's just a blank space in my web
Your IIFE is never invoked:
(function () {
// some code...
}); // Function is expressed but not invoked
Should be:
(function () {
// some code...
})(); // Make sure to add the final parenthesis pair
Just for completeness, it also works with the calling parenthesis pair just after the braces:
(function () {
// some code...
}());
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>
I need to have a popover which can present a map inside its body. I did this basic example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<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>
<link rel="stylesheet" href="css/style.css">
<script src="script/script.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
<script>
let script = `
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
<\/script>`;
console.log(script);
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>" + script,
html: true
});
});
</script>
</body>
</html>
It sends html content which contains a div and script for the leaflet map. It doesn't work.
I am not sure this approach would work out and maybe you know a better way to have a map once a table cell or any other element is clicked.
You cannot append script tags directly on the content prop of the popover method. To make this, you will need listen to some event triggered after the popover is rendered, like shown.bs.popover:
$('[data-toggle="popover"]').on('shown.bs.popover', () => {});
Inside, you'll be able to call Leaflet and create the map instance. I attach a CodePen with the concept (I applied some CSS to make adjustments on the popover layout to show the map correctly) https://codepen.io/geekzolanos-dev/pen/gOpwRrR
Please check following code snippet:
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
title: 'A nice map inside a popover!',
content: "<div id='map' style='background: gray;'></div>",
html: true
});
$("[data-toggle=popover]").on('shown.bs.popover', function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
});
});
#map{
height:300px;
width:300px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<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>
<div class="container">
<h3>Popover Example</h3>
Toggle popover
</div>
Hope this will helps you.