Only using OpenStreetMap in this leaflet map? - html

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.

Related

Shapefile not Showing up in Leaflet Map [duplicate]

This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 1 year ago.
I have a very simple example map that I would like to add a shapefile to. The shapefile is zipped and I've checked that it shows up here http://leaflet.calvinmetcalf.com/#3/32.69/10.55, however it does not show up on my example map. Any help with this would be greatly appreciated.
Code
<!DOCTYPE html>
<html>
<head>
<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>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script src="Plugins//shp.js"></script>
<script src="Plugins//leaflet.shpfile.js"></script>
<!--
Needed?
-->
<style>
#map {
position: relative;
margin: 0 0 0 0;
height: 650px;
width: 700px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 9
});
map.setView([34.15, -112.0], 7)
map.setMaxBounds(map.getBounds());
Streets = L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
var shpfile = new L.Shapefile('TestShapefile.zip');
shpfile.addTo(map);
var overlayMaps = {
"TestShapefile": shpfile
};
L.control.layers(overlayMaps).addTo(map);
</script>
</body>
</html>
In the Plugins folder that I reference I have the following javascripts:
leaflet.shpfile.js and
shp.js
This can happen if you have included a url with a domain different than yours, then you would receive a CORS error. It is purely for controlling what a domain can request from another one. f.i
var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");
So try placing the file locally . F.i where you have also your .js files like this:
var shpfile = new L.Shapefile("./congress.zip");
Here is a demo
Note also that you have to run your index.html inside a web server and not via the file system by opening the html file on the browser. An alternative would be to run it via a module bundler like webpack or parcel etc. similar to the demo.

How to use Leaflet Map for free?

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>

Leaflet Tutorial Blank Outcome

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>

Is there a way load map in specific language?

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

How to get a map without labels?

I want to get a map (I only need a picture) that has the road network
but without labels (text on the map). I tried to get such a map from Google API and thought "element:geometry"
works.
But, for example, this link is still full of texts.
How can I obtain a road network map (static picture is ok) without text labels?
Any provider is ok, e.g. Google, Yahoo, Mapquest...
Use this style:
style=feature:all|element:labels|visibility:off
it will hide all labels for all features.
http://maps.google.com/maps/api/staticmap?sensor=false&size=512x512&center=Brooklyn&zoom=12&style=feature:all|element:labels|visibility:off
I got a better solution:
Create a html file and insert the code below.
<!DOCTYPE html>
<html>
<head>
<title>Mapa GMR Norte</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 41.4416459, lng: -8.2911885}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
Hope it helps! :)
The Google Maps Styled Map Wizard (link below) will allow you to remove labels (and also make tons of other customizations).
https://mapstyle.withgoogle.com/
This is the documentation on map styling for the JavaScript API. There's also a Styled Map Wizard that lets you play with the styles to get exactly what you want.
by "I only need a picture" I take it you don't need to access to API, Google Inc devs still didn't a chance to apply all the features from the old maps to the new design.
However you can still access it by going to https://maps.google.com/?output=classic
and you can go to settings and customise "tick labels off" and so forth...