Térképes megjelenítések: MapBox api használata

MapBox térkép api használata:

A szabály itt is azonos a header részben be kell tölteni az js és css könyvtárakat. A web lap betöltési eseményéhez kötve indítani kell a térkép réteg aktiválását. Induló pozíciót és a nagyítás mértékét meg kell adni. A képernyő pont pozicióját attributumait és esemény kezelőjét be kell állítani. És már működik is.

Megjegyzés ként itt egy 'mapbox.accessToken' kulcsot is meg kell adni. Ezt fejlesztői adminisztráció után lehet kérni.

Minta :

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MAPBOX</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<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' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoia2xham9zdyIsImEiOiJlUk03ZG5vIn0.KNHvwFk6Takda1wWhc6kdA';
var map = L.mapbox.map('map')
.setView([47.245, 19.4380], 10)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'))
.addControl(L.mapbox.geocoderControl('mapbox.places', {
keepOpen: true
}));

var featureLayer = L.mapbox.featureLayer({
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
'from': 'Duke Point',
'to': 'Tsawwassen',
'marker-color': '#548cba',
'marker-size': 'large',
'marker-symbol': 'ferry'
},
geometry: {
type: 'Point',
coordinates: [19.29, 47.16]
}
}]
})
.addTo(map);
featureLayer.eachLayer(function(layer) {
var content = '<h2>A ferry ride!<\/h2>' +
'<p>From: ' + layer.feature.properties.from + '<br \/>' +
'to: ' + layer.feature.properties.to + '<\/p>';
layer.bindPopup(content);
});

</script>
</body>
</html>
</script>
</body>
</html>

Link :

https://mierdekel.hu/mapbox/

https://mierdekel.hu/mapbox/index_draw.html

https://mierdekel.hu/mapbox/index_csv.html