I have a geojson file that I'm trying to add to a map but for some reason, they are misaligned.
I have made this simplified version of the page, removing all my markers and all other HTML to try to isolate the problem but with no joy.
I've tried
Loading the Geojson on the page in <script> tags like the leaflet JS tutorial shows
Saving the Geojson in a folder on my site and calling it to load with JavaScript
And with the link, you see below I've used fetch to get the API
http://codeyeti.co.uk/ActiveCommuters/map_dev.php
They all return this same misaligned result.
the Geojson file can be viewed on Maptiler where it displays perfectly
https://cloud.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/#9.19/53.2826/-4.3682
here is my code
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js" crossorigin=""></script>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([53.309242,-4.626208], 10);
L.tileLayer('https://api.maptiler.com/maps/openstreetmap/{z}/{x}/{y}.jpg?key=g9ErshPDnj0LYYtEd10o', {
attribution: '© MapTiler © OpenStreetMap contributors',
}).addTo(map);
fetch('https://api.maptiler.com/data/b92719af-8d5b-4006-9631-3d8b13eaa1c6/features.json?key=g9ErshPDnj0LYYtEd10o')
.then(function (responce) {
return responce.json();
})
.then(function (data) {
L.geoJSON(data).addTo(map);
});
</script>
</body>
</html>
Has anyone had trouble like this?
misaligned result by style.css line 271 :
img {
margin: 10px 0px;
}
you can check it
Map of leaflet is a group images
Related
Why polygon not showing on the map? I was trying to highlight a specific location using polygon but it is not showing on the map even though there is no error. here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js">
</script>
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map">
<a href="https://www.maptiler.com"
style="position:absolute;left:10px;bottom:10px;z-index:999;"><img
src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
</div>
<p>© MapTiler <a
href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap
contributors</a></p>
<script>
var map = L.map('map').setView([8.94917, 125.54361], 12);
L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?
key=aLd1dKi19JrBFCzDze2p',{
tileSize: 512,
zoomOffset: -1,
minZoom: 1,
attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\"
target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca
href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy;
OpenStreetMap contributors\u003c/a\u003e",
crossOrigin: true
}).addTo(map);
var polygon = L.polygon([8.94917, 125.54361],[9.00333023, 125.48916626],
[8.85280991, 125.66551208]).addTo(map);
</script>
</body>
</html>
There are several issues that prevent the map from displaying, and the polygon shape for loading:
some small errors in source, caused by line returns: see browser console to check and correct these. (note these might not exist in your source, but may be caused by line wrapping when copy/pasting the source).
Main issue is that the polygon coordinates should be wrapped in an array, as shown in bold in this example :
var polygon = L.polygon( [ [8.94917, 125.54361],[9.00333023, 125.48916626], [8.85280991, 125.66551208] ] ).addTo(map);
I am working on my assignment and I was wondering if you can point out the mistake that I am committing in my code.
For this assignment, I am building a map with a third-party library and API.
The steps were to:
Request an access token from Mapbox (Links to an external site.)
Generate an HTML 5 document.
Reference the leaflet CSS and JavaScript files.
<link rel="stylesheet" h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
Set the map view to the following coordinates: Latitude: 39.678121 Longitude: -104.961753.
Add a zoom level of 15.
Add a tile layer and apply a max zoom of 20.
Add a marker using the provided coordinates.
So far, this is what I have:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Basic map</title>
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<link rel="stylesheet" href="css/leaflet.css">
</head>
<body>
<div id="map"></div>
<script src="js/leaflet.js"></script>
</body>
</html>
CSS
/* required styles */
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
JS
L.mapbox.accessToken = 'pk.eyJ1IjoicmVkYnVsbDg0IiwiYSI6ImNrZGNvYm9qeDB6cW0ycW16MmF0Y2szbW0ifQ.Fru8Yiy4GdL66v3o7769zg';
var map = L.mapbox.map('map')
.setView([39.678121, -104.961753], 15)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
// L.marker is a low-level marker constructor in Leaflet.
L.marker([39.678121, -104.961753], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'college',
'marker-color': '#fa0'
})
}).addTo(map);
L.tileLayer('https://stamen-tiles-{S}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors, CC-BY-SA',
}).addTo(map);
For some reason, the HTML file will not load ( blank page) using the following in the head section of the HTML document:
<link rel="stylesheet" h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
However, I was able to get the HTML file to load using the following links in the head section of the HTML document:
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
Can you please assist with correcting this issue and other issue that you may have spotted?
Your link & script tags are missing href & src attributes:
<link rel="stylesheet" href="h..t#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="s..t#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
If it still doesn't work let us know where you got this path from:
"h..t#1.6.0/dist/leaflet.css"
I was searching for free maps as an alternative to google maps to use in my website. As I searched I found leaflet. Referring the tutorial I tried creating a simple map in my localhost. But its loading blank. I am using leaflet for the first time. Is there anything I am missing out in my code? Can anyone help me..? Thanks in advance.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
</script>
</body>
</html>
You need to add a tile layer to your map and try using one of the latest leaflet versions, such as 1.3.3. Moreover set a height like this:
#map{ height: 500px }
Try this
var map = L.map('map').setView([43.64701, -79.39425], 15);
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: 500px
}
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.3.3/dist/leaflet.css">
<script src='https://unpkg.com/leaflet#1.3.3/dist/leaflet.js
'></script>
<div id="map"></div>
HTML with JS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css" />
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-ksdsad&callback=initMap"></script>
<script>
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
</div>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
The specific problem is that when I put CSS in the HTML with #map the map shows and works but from the separate file it just doesn't show. Why?
EDIT: Making a MVC application via Visual Studio
EDIT 2: Something with the file location was wrong. I created a new project and put the CSS in a file that was already made. Now it's working.
First things first - put your script tags into head and try again. I suspect that there's some funky stuff with google maps replacing contents of #map and removing scripts in the process.
It should be <link rel="stylesheet" type="text/css" href="./css/custom.css" /> Use . insteads of ~
How can I show a centered on the map progress bar (with %) while waiting that a layer is rendered on the map?
Here is my code:
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<script type='text/javascript' src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
</head>
<body>
TF.Landscape |TF.Outdoors
<div id="map" style="width: 640px; height: 480px"></div>
<progress value="0" max="100"></progress>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"> </script>
<script>
var map;
var tileLayer;
function showMap (layerURL) {
if(!map) {
map = L.map('map').setView([19.5, -73], 7);
}
tileLayer = L.tileLayer(layerURL, {
attribution: 'Map data © OpenStreetMap',
maxZoom: 18
});
//map.addLayer(tileLayer);
map.spin(true);
setTimeout(function () {
map.addLayer(tileLayer);
map.spin(false);
}, 3000);
}
</script>
Thanks!
There is not built- or plugged-in solution for this yet.
So
if the progress-bar and % are not that important and you mainly want to tell the user that something's loading you might want to have a look at Leaflet.Spin which is a plugin for showing a spinning icon on your map.
if you really want a progress-bar a good starting point might be the markercluster-plugin. The 50k example has such a progress bar.