I'm making a map and i want the map to zoom into my location but i get the error as "Uncaught SyntaxError: Unexpected identifier". Does anybody know what's wrong? please help me! Thank you so much!
This is my html:
<!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">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<title>Document</title>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="main.js"></script>
</body>
</html>
This is my JS:
mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
enableHighAccuracy: true
})
function successLocation(position) {
console.log(position)
setupMap([position.coords.longtitude, position.coords.latitude])
}
function errorLocation() {
}
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
center: center
});
}
Related
This question already has an answer here:
Leaflet - I cannot seem to get the basic examples working
(1 answer)
Closed 10 months ago.
I am using leaflet with openstreetmap. However, I cannot get the map to render correctly.
Find below my minimum viable example.
<!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" />
<title>Land</title>
<link
href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
rel="stylesheet"
/>
</head>
<body>
<div id="Karte" style="height: 100%; width: 100%"></div>
</body>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script>
var Karte = L.map("Karte").setView([43.00, -79.00], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'Kartendaten © OpenStreetMap',
useCache: true,
}).addTo(Karte);
</script>
</html>
Any suggestions what I am doing wrong?
The error comme from the style you add to your Kart. 100% of 0 will result to 0px. You should put a fixed height or width as the documentation said.
Make sure the map container has a defined height, for example by setting it in CSS
You can for example use #Karte { height: 180px; }
#Karte { height: 180px; }
<!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" />
<title>Land</title>
<link
href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
rel="stylesheet"
/>
</head>
<body>
<div id="Karte"></div>
</body>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"></script>
<script>
var Karte = L.map("Karte").setView([43.00, -79.00], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'Kartendaten © OpenStreetMap',
useCache: true,
}).addTo(Karte);
</script>
</html>
I'm using mapbox to make a map. I don't know if my map is being rendered or not cause the only i could see on the screen is the pointer and i can't even open the console to read the mistake. Please help me to find out if there's anything wrong with my codes! Thank you so much:
My html:
<!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">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<title>Document</title>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="main.js"></script>
</body>
</html>
My JS:
mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
enableHighAccuracy: true
})
function successLocation(position) {
console.log(position)
setupMap([position.coords.longtitude, position.coords.latitude])
}
function errorLocation() {
}
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: center
});
}
when use the hammer.js default 'doubletap'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('tap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
when I double tap, it print 'tap' twice, and 'doubletap' once, but I want it just print 'doubletap', don't fire the 'tap'.
I try requreFailure http://hammerjs.github.io/require-failure/ and Hammer.js : How to handle / set tap and doubletap on same elements
so I write this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<style media="screen">
.box {
width: 400px;
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
</div>
<script src="js/hammer.js" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var myElement = document.querySelector('.box')
var hammer = new Hammer(myElement)
var singleTap = new Hammer.Tap({ event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
hammer.add([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure([doubleTap]);
hammer.on('doubletap', function (e) {
console.log(e.type)
}).on('singletap', function (e) {
console.log(e.type)
})
})
</script>
</body>
</html>
But it doesn't console.log anything(even error message), it's really weird. The hammer's version is 2.0.8. sorry for my poor English, hope that's clear.
Try using
var hammer = new Hammer.Manager(myElement);
instead of
hammer = new Hammer(myElement).
Ciao.
try this code:
var timeInMs = 0;
hammer.on('tap', function(e) {
if((Date.now()-timeInMs)<300){
//doubleTap
}else{
//tap
}
timeInMs = Date.now();
});
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX
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>