I´m starting to use Leaflet and there´s many things that I would like to know.
During my study I found this interesting video (https://www.youtube.com/watch?v=wnsEYm9hF0o&list=PLGHe6Moaz52PUNP4DtIshALDogSURIlYB)
and I followed the instructions, using sublime text, but my result is different as you can see bellow. My map does not appear.
My code is:
The result (From the video)
My result was:
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js"></script>
<style>
#map {position: absolute; top: 0; bottom: 0;not left: 0; right: 0;}
</style>
</head>
<body>
<div id= "map"></div>
<script>
var map = L.map('map').setView ([0, 0], 1)
l.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=mji5GJMMFmiwn83UOmBb', {
attribution:'© MapTiler © OpenStreetMap contributors',
}).adsTo(map);
</script>
</body>
</html>
In order to make your map visible, you have to make sure the map container has a defined height. For example, in CSS, you can do:
#map {
min-height: 80vh;
}
Then, you have to set the map view to your chosen geographical coordinates and a zoom level:
var map = L.map('map').setView([latitude, longitude], zoom level);
Finally when you add the tile layer to the map, you made two typos, you must write:
L.tileLayer instead of l.tileLayer
addTo instead of adsTo.
It should work like that.
Related
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'TOKEN';
var map = new mapboxgl.Map({
container: '<your HTML element id>',
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
I have this code working with my custom style, but anytime I try to modify it, the page turns blank. If I change the center, the zoom, or the width or the height, nothing shows up. I'm not sure what I'm doing wrong. It's my first Mapbox attempt.
Thanks!
Can you post the modified code that is not working please? The code that you have provided is incomplete.
Please try out the below code to display a map. Please ensure to replace <ACCESS_TOKEN> with your access token:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = '<ACCESS_TOKEN>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
I'm trying to build out the functionality to measure a line that a user draws over a Mapbox map, using turf.js 'length' feature.
That said, I'm a coding newb - I know just barely enough to be dangerous.
Ultimately I'd like to be able to draw both areas and lines, and have their respective measures returned (area for polygons, lengths for line strings).
Can anyone offer insight as to why this code doesn't work?
https://jsfiddle.net/knxwu342
<html>
<head>
<meta charset=utf-8 />
<title>Line Test</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.calculation-box-length {
height: 75px;
width: 100px;
position: absolute;
bottom: 40px;
left: 10px;
background-color: rgba(255, 255, 255, .9);
padding: 15px;
text-align: center;
}
</style>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'>
</script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'>
</script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<div class='calculation-box-length'>
<p>Length:</p>
<div id='calculated-length'></div>
</div>
<nav id="menu"></nav>
<script>mapboxgl.accessToken = 'pk.eyJ1IjoibWJsYWNrbGluIiwiYSI6ImNqaWMxcGk2MzAwd3YzbG1oeW4yOHppdnYifQ.xdb-2slu5LapzpuMCiKzQQ';
//*********-----------------------------------------------------------------------------------------------------------------**********
//Create new map object
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mblacklin/cjii8o7w91g9o2stcktaeixai', // stylesheet location
center: [-117.572737, 51.746916], // starting position [lng, lat]
zoom: 16 // starting zoom
});
//*********-----------------------------------------------------------------------------------------------------------------**********
// Add navigation controls to the map
map.addControl(new mapboxgl.NavigationControl());
//*********-----------------------------------------------------------------------------------------------------------------**********
// Add the ability to draw geometries and display their measurements
//
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon: true,
trash: true
}
});
map.addControl(draw);
map.on('draw.create.', updateLength);
map.on('draw.delete', updateLength);
map.on('draw.update', updateLength);
function updateLength(e) {
var data = draw.getAll();
var answer = document.getElementById('calculated-length');
if (data.features.length > 0) {
var length = turf.length(data);
// restrict to area to 2 decimal points
answer.innerHTML = '<p><strong>' + length + '</strong></p><p> meters</p>';
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete') alert("Use the draw tools in the upper right to calculate a distance");
}
};
//
//*********-----------------------------------------------------------------------------------------------------------------**********
</script>
</body>
</html>
I see two little problems in your code:
There is a typo in your 'draw.create' listener. Just remove the point after create:
map.on('draw.create', updateLength);
The version of Turf you are using is too old and does not seem to have the length function. Try using the most recent one: https://npmcdn.com/#turf/turf/turf.min.js
Wondering if anyone can help, it's a bit of a strange one. My leaflet map works in isolation, but when added to some existing code the geoJSON (world-map.geojson) appears not to be added to a layer, I just get a grey screen with the leaflet map controls. However, when the leaflet.css is commented out you can see the geoJSON layer has been added... I get no errors and If I comment out references to other JS files it makes no difference.
As this appears to be conflict of sorts i'm not expected a hard and fast answer, but if anyone has come across this before or could suggest any pointers it would be much appreciated.
HTML
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css">
<script type="text/javascript" src="leaflet.js"></script>
<script type="text/javascript" src="world-map.geojson"></script>
<style type="text/css">
#map {
height: 600px;
width: 100%;
}
</style>
<div id="map"></div>
<script src="map.js"></script>
JS - stripped right back
var geojson,
layer,
map = L.map('map').setView([43.8476, 18.3564],3);
// style each continent
function countriesStyle(feature) {
return {
fillColor: "#FED976",
weight: 1,
opacity: 1,
color: "white",
dashArray: 1,
fillOpacity: 0.7
};
}
// add layer
geojson = L.geoJson(countries, {
style: countriesStyle,
maxZoom: 2,
minZoom: 2
}).addTo(map);
// works. countries var is in the DOM
for(var i = 0; i < countries.features.length; i++) {
console.log(countries.features[i].properties.name)
}
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I have a leaflet map in a div that I loa like this:
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I then have a div such as this:
Some js that loads the map:
map = L.map($attrs.id,
center: [40.094882122321145, -3.8232421874999996]
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo map
Then on page load I have some JS that monitors window height and resizes:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
However when the map loads it loads with half the tiles in grey. When i resize the map loads fine but the initial load is 1/2 grey
If you don't have a reason to use JS for map sizing its probably better to use CSS:
html, body, #map {
width: 100%;
height: 100%;
}
However you can try using map.invalidateSize() after inserting the map into the DOM (or map resized by $("#map").height($(window).height())).
invalidateSize() is called by default when you resize the window, see the following links:
https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 and https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.
After a long search on this issue, in my case I had a global css style which was :
<pre>
img {
position: relative;
display: block;
max-width: 100%;
}
</pre>
In my case problem were the "position : relative", so I add a line
<pre>
//Fix personnal bug leaflet
.leaflet-pane{
img{
position: absolute;
}
}
</pre>