map is not rendered using mapbox - javascript

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
});
}

Related

Leaflet - Map does not show [duplicate]

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>

center parameter is not defined in creating a map

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
});
}

How json animation of Shape.so animated illustrator

i'm using Shape.so animated illustrator on html page they are providing json code for that can anyone help how to use that json in html.
I have json file, you can export json from https://shape.so/app/icons/
thanks in advance
You can import Lottie and use loadAnimation method as described here:
https://airbnb.io/lottie/#/web?id=usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#anim {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="anim"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js" type="text/javascript"></script>
<script>
var element = document.getElementById('anim');
lottie.loadAnimation({
container: element, // the dom element that will contain the animation
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json' // the path to the animation json
});
</script>
</body>
</html>

jQuery fadein effect to transfer to another page

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

Load tiles using mapbox.js

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>

Categories

Resources