I have been trying to understand Leaflet through the first tutorial, and my page keeps coming up blank. Here is the tutorial I was following http://leafletjs.com/examples/quick-start/
Below is the code that I had written with an access token that I generated. I don't understand what is wrong. I have been testing it through GitHub Pages.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<style>
#map{ width 960px; height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'leafletTestToken1',
accessToken: 'pk.eyJ1IjoiYmxhY2ttb3JlMCIsImEiOiJjaXlub251ZjIwMDJmMnBxems2bmpiYXA2In0.2Hxl5QoDhIY6OR4p3GsU2w'
}).addTo(map);
</script>
</body>
</html>
There are a few problems. The most significant is that you have not created a map; you've only created a tile layer. You need to create a map to which the tile layer can be added. For example:
var map = L.map('map').setView([51.505, -0.09], 13);
Also, the id is does not appear to be valid. It needs to correspond to a Mapbox project ID or to one of the pre-defined Mapbox map IDs. For example:
id: 'mapbox.streets'
And the CSS is not valid; there is a missing : after width.
There is a working snippet below:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1IjoiYmxhY2ttb3JlMCIsImEiOiJjaXlub251ZjIwMDJmMnBxems2bmpiYXA2In0.2Hxl5QoDhIY6OR4p3GsU2w'
}).addTo(map);
body { margin: 0 }
#map { width: 100vw; height: 100vh }
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<body>
<div id="map"></div>
</body>
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!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">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
I'm new to creating maps with map layers and tiles, so please bear with me.
So I'm working on a map to display points, and I've read that OpenStreetMap is free, and mapbox isn't. For this reason we only want to use OpenStreetMap.
This HTML example draws a map and plots points, but the code says it uses both technologies. Here's the code.
Two questions:
Is it correct to say that both mapbox and OpenStreetMap are essentially the same thing as they both offer tiles used to draw maps?
I would like to remove mapbox and only use OpenStreetMap in this example. Is this possible?
<!DOCTYPE html>
<html>
<head>
<title>Leaflet - Points</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-dsdfsdjflsdfjsljfsdl+asfsfsflskjfsld==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js" integrity="sha512-/wrwrwerwer+wwerwrwerwer+dasdasdas==" crossorigin=""></script>
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
width: 1200px;
height: 800px;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="points.js" type="text/javascript"></script>
<script>
var map = L.map('map').setView([18.4148, -66.1241], 11);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.qweqeqweqweqwe.qeqqqwe', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'mapbox.streets'
}).addTo(map);
L.geoJSON([bicycleRental], {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 7,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
});
}
}).addTo(map);
</script>
</body>
</html>
To use OpenStreetMap tiles you have to set this:
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo(map);
Instead of mapbox servers. Check the example on the Leaflet's home https://leafletjs.com/index.html
This is a great resource for finding basemaps. When you select one, you can simply copy the JavaScript provided. Most are free to use with attribution.
Leaflet is open source and free. However the examples on leaflet site use Mapbox to render map. Mapbox is more expensive than Google map (Mapbox pricing).
The question is: can anyone use Leaflet really free?
You can use the Leaflet library for free, only the tileprovider used in the examples, Mapbox, asks money for serving tiles. You just need a free tileprovider like OpenStreetMap for instance:
var map = new L.Map('leaflet', {
center: [0, 0],
zoom: 0,
layers: [
new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 1.0.3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
</body>
</html>
I Created World Map Using leafletjs And Now Trying To Display Data From https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json As Circle My Data Distribution Output Looks Like
As Of Now Considering Radius As Constant
But It Should Look Like
As Data Is Distributed Across Map
My Codes Are
// load and display the World
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function(error, data) {
var map = L.map('map', {
center: [20.0, 5.0],
minZoom: 2,
zoom: 2
});
L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors | Tiles Courtesy of MapQuest <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
}).addTo(map);
data.features.forEach(function (data2) {
var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);
var circle = L.circle([coordinates[0],coordinates[1]], 10, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Forced Layout</title>
<meta charset="utf-8" />
<link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/d3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<link href="demo.css" rel="stylesheet" />
</head>
<body>
<!--
<div class="mainContainer text-center">
<div id="chart"></div>
</div>
-->
<div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
<script src="../Scripts/jquery-2.2.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="demo.js"></script>
</body>
</html>
Fiddle Link
Instead of this
var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);
it should have been this
var coordinates = ([+data2.properties.reclat, +data2.properties.reclong]);
When you create a circle in leaflet the first array element is lat second is lon. refer
L.circle([50.5, 30.5], 200).addTo(map);
For latlng object lat comes first then lon refer
working code here
I'm using Google Maps API v3, and the map language is set according to user's browser locale.
Is there a way to change this setting and force map to load in US English?
There is this, but it changes the region language, i.e. street names etc., I also want to control the map buttons and the interface language.
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
And you can load map in any specific language by passing the value of language code parameter with in this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
Some example language codes are given here:
pass en for load map into english similarly ja for Japanese and
fr for French
I hope this is what you are asking for.
for more info click here
Happy coding!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&language=sa"></script>
i am using languague of saudi arabia