I'm trying to design a web app for mapping accessibility on my university. Unfortunately the map only loads until I try resize the map so they would shown on the whole webpage. Most of the plugins I tried to add (like Fullscreenmode or Location doesn't work, too). The page turns white. What did I do wrong?
Here are my snippets:
// Initialize leaflet.js
var L = require('leaflet');
//OSM tiles attribution and URL
var osmLink = 'OpenStreetMap';
var osmURL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib = '© ' + osmLink;
//Stamen Toner tiles attribution and URL
var stamenURL = 'http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}';
var stamenAttrib = 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap';
//Creation of map tiles
var osmMap = L.tileLayer(osmURL, {
attribution: osmAttrib
});
var stamenMap = L.tileLayer(stamenURL, {
attribution: stamenAttrib,
subdomains: 'abcd',
ext: 'png'
});
//Map creation
var map = L.map('map', {
zoomControl: false,
layers: [osmMap]
}).setView([50.927, 6.931], 16);
//Base layers definition and addition
var baseLayers = {
"OSM Mapnik": osmMap,
"Stamen Toner": stamenMap
};
//Add baseLayers to map as control layers
L.control.layers(baseLayers).addTo(map);
//Fullscreen button
map.addControl(new L.Control.Fullscreen());
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
map.isFullscreen() // Is the map fullscreen?
map.toggleFullscreen() // Either go fullscreen, or cancel the existing fullscreen.
// `fullscreenchange` Event that's fired when entering or exiting fullscreen.
map.on('fullscreenchange', function() {
if (map.isFullscreen()) {
console.log('entered fullscreen');
} else {
console.log('exited fullscreen');
}
});
//create custom zoom Control on right bottom
var zoomControl = L.control.zoom(
zoomOptions = {
position: 'bottomright'
}
).addTo(map);
// Initialize the base layer
//offer alternative base layer; include base layer choice toggle on top right of mapbox
var osm_mapnik = L.tileLayer('https://api.mapbox.com/styles/v1/jlambre1/cjtzjn4xv1ceo1fph8wuq1y9u/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoianVzbGFtYnJlIiwiYSI6ImNqeTB1ZGo4eTAxdXUzbmsyOG1xcmQ1NWMifQ.IWZKtDwcnUCq03fo9-ualg', {
maxZoom: 19,
attribution: '© OSM Mapnik OpenStreetMap'
}).addTo(map);
body {
padding: 0;
margin: 0;
}
html,
body,
#map {
height: 100%;
width: 100%;
}
<head>
<meta charset="utf-8">
<title>Mapping Acces #UzK</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<!-- Leaflet CDN-->
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Leaflet CSS-->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="styles/style.css">
<!-- Custom Stylesheet -->
<link rel="stylesheet" type="text/css" href="./styles/main.css">
<!-- Leaflet Fullscreen-->
<link rel="stylesheet" href="./leaflet-fullscreen/Control.FullScreen.css" />
<script src="./leaflet-fullscreen/Control.FullScreen.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--Locate-->
<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#[VERSION]/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol#[VERSION]/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<!-- jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Switching Basemaps-->
<link rel="stylesheet" href="L.Control.Basemaps.css" />
<script src="L.Control.Basemaps-min.js"></script>
<!-- Fullscreen -->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
</head>
And I receive this error message: https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
Related
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 a plugin for leaflet map geosearch https://github.com/smeijer/leaflet-geosearch this is the repository. My code is very simple but I can't get the result in my map.
I don't know what is happening. The error I get in the console is
TypeError: can't convert undefined to object
I expect when click on the result of the search I get a marker similar to this website have in the Google Map section https://investigadoresparaguayosenelmundo.com/registration/
Here is my code :
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!--CDN para agregar los cluster de Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster#1.4.1/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster#1.4.1/dist/leaflet.markercluster.js"></script>
<!--CDN para el plugin de fullscreen del mapa-->
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<!--CDN para agregar la barra de busqueda-->
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.css"/>
<!-- Make sure you put this AFtER leaflet.js, when using with leaflet -->
<script src="https://unpkg.com/leaflet-geosearch#3.0.0/dist/geosearch.umd.js"></script>
</head>
<body>
<div id="leafletMap-registration"></div>
</body>
</html>
CSS:
#leafletMap-registration {
height: 400px; /* The height is 400 pixels */
}
Javascript:
// you want to get it of the window global
const providerOSM = new GeoSearch.OpenStreetMapProvider();
//leaflet map
var leafletMap = L.map('leafletMap-registration', {
fullscreenControl: true,
// OR
fullscreenControl: {
pseudoFullscreen: false // if true, fullscreen to page width and height
},
minZoom: 2
}).setView([0,0], 2);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(leafletMap);
const search = new GeoSearch.GeoSearchControl({
provider: providerOSM,
style: 'bar',
searchLabel: 'Buscar institución',
autoClose: true,
});
leafletMap.addControl(search);
https://jsbin.com/lukikafalo/1/edit?html,css,js,console,output
You need to create the refs for your element.
In order to show the results lat lng on the map by placing a marker, you need to use keep result: true.
Use my elaborative blog:
https://medium.com/#jadhavshivam0228/open-street-maps-vuejs-integration-39c39b85b5bc
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'm working on MapBoxgl and I want to add the location of a restaurant as a marker.
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="map">
<h1>Find Us</h1>
</section>
<script src="app.js"></script>
</body>
</html>
This is app.js:
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
The CSS is:
#map {
width: 100%;
height: 500px;
}
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
#map {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="map">
<h1>Find Us</h1>
</section>
<script src="app.js"></script>
</body>
</html>
This is the first picture before zooming in
This is the second picture after zooming in
I'm not sure what is causing the problem. Also the search box somehow seems to be above the map instead of inside it.
Your code is currently adding the marker to a map container which includes both the map and a heading "Find Us." This means the location is offset by the height of the heading.
<section id="map">
<h1>Find Us</h1>
</section>
To fix this you should move the map to its own <div> like this:
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
And your full code should look something like this:
mapboxgl.accessToken = 'pk.eyJ1IjoibWlvY2h1bmc3IiwiYSI6ImNrOG13cXoxbDA2c2UzbW1lcm1iZWZ5NnEifQ.5nuyV8naVrjogYKyx_TFzw';
const map = new mapboxgl.Map({
container: 'map', //appears in the container with the ID map
style: 'mapbox://styles/mapbox/streets-v11',
center: [-0.1103, 51.5082], // Starting position [lng, lat]
zoom: 11.89, // [Starting zoom]
});
// Custom Marker
var marker = new mapboxgl.Marker() // initialize a new marker
.setLngLat([-0.1103, 51.5082]) // Marker [lng, lat] coordinates
.addTo(map); // Add the marker to the map
// Geocode
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
mapboxgl: mapboxgl, // Set the mapbox-gl instance
marker: false, // Do not use the default marker style
placeholder: '',
proximity: {
longitude: -0.1103,
latitude: 51.5082
}
});
// Add the geocoder to the map
map.addControl(geocoder);
#map {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Com Viet</title>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/e3c287111d.js" crossorigin="anonymous"></script>
<!-- CSS Stylesheet -->
<link rel="stylesheet" href="/Styles/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Oswald:500,700|Roboto+Condensed:300,400,600" rel="stylesheet">
<!-- Mapbox API -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox Geocode -->
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.2.0/mapbox-gl-geocoder.css' type='text/css'/>
</head>
<body>
<section id="container">
<h1>Find Us</h1>
<div id="map"></div>
</section>
<script src="app.js"></script>
</body>
</html>
Disclaimer: I work at Mapbox
In addition to Patrick's answer, a problem I ran into was I was setting the mapbox width and height programmatically in the code to 100vh:
dom: HTMLElement = this.elementRef.nativeElement;
elements = dom.querySelectorAll('.mapboxgl-canvas');
elements[0]['style']['height'] = '100vh';
I am using Angular, so your code for setting height & width might be different. When I switched it from 100vh to 100% this problem went away.
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>