„Mapbox” változatai közötti eltérés

A lap jelenlegi, 2017. május 28., 18:20-kori változata

A Mapbox térképszolgáltatóknak kínál megoldásokat, illetve emellett térképek tervezéséhez és karbantartásához készít eszközöket. Ezek többnyire OpenStreetMap adatokat használnak. A Mapbox elkötelezett a nyílt megoldások mellett, de nem csak használja az adatokat, hanem többek között a Mapnik nyílt forrású térképrenderelő megoldás kódjának fő hozzájárulója is.

Tartalomjegyzék

1 Mapbox, mint cég
2 Árazás
- 2.1 Csomagok összehasonlítása
3 Fejlődéstörténet
4 Példák (Mapbox.js)
5 Az újabb irányvonal: a Mapbox GL JS megvalósítása és működése a háttérben
6 Példák (Mapbox GL JS)
7 Felhasználás, alkalmazás
8 Források

Mapbox, mint cég

Történelem

A cég startupként indult 2010-ben, Washingtonban. Dolgozóinak száma 2017-re elérte a 180 főt (az első negyedév végére 199 fő). Főként dizájnerek, szoftver fejlesztők és térképészek. Mára több, mint 5000 üzleti és 200000 ingyenes ügyfelük és felhasználójuk van. Olyan cégek valamint szervezetek használják a termékeiket, mint a Foursquare, Evernote, Pinterest, Github, The Weather Channel, Guardian, Financial Times, CNN, Greenpeace, National Geographic. Hisznek az open-source fejlesztésekben, ezért jelenleg 440-nél is több publikus repójuk van a GitHubon.

Munkásság

Egy olyan eljáráson dolgoznak, amivel a műholdképek minősége feljavítható. Ha most bárki megnyitja a Google Maps vagy a Bing Maps térképeit, átkapcsol műholdas nézetbe, akkor azt veheti észre, hogy az egész Földön mindenhol világos van, mindenhol nyár van és nincsenek felhők. Ha elkezdünk visszaközelíteni, akkor kiderül, hogy sokszor nagy kontraszteltérés van egymás mellett lévő sávok közt, feltűnnek felhők, a színek össze-vissza változnak és sok esetben a képek rossz minőségűek. Ez annak köszönhető, hogy ezek a térképek ezernyi kis darabból vannak összerakva. Előfordul, hogy az egymás melletti képek teljesen más forrásból származnak, más technológiával készültek, illetve időben akár évekre van egymástól két szomszédos darab. A Mapbox azt tűzte ki célul, hogy felszámolja az ilyen hibákat, megszabadulva a zavaró felhőktől és grafikai egyenetlenségektől. Ennek megvalósításához az alapanyag a NASA Lance-Modis rendszerének műholdjáról származik. A Mapbox ezekből az adatokból ragadta ki a 2011. január 1. és 2012. december 31. közt készült két évnyi anyagokat. Ez 339 ezer darab 16 megapixeles képet jelent, ami több mint 5687 milliárd pixel összességében. A projekt célja, ezt a pixelmennyiséget lefésülni 5 milliárd pixelnyire, amiből összeáll egy részletes, de egységes glóbusz.

Külön tájékoztató oldal a logójukról és a nevükről

A cég precízen figyel a nevüket és logójukat érintő pontosságra. Épp ezért egy külön oldal hoztak létre ezek helyes használatáról. A szemléletesség kedvéért összeszedtek néhány korábban előjött, helytelen példát is.

A Mapbox tájékoztató oldala a helyes logó- és névhasználatról

Árazás

A Mapbox jelenleg háromféle csomagban nyújtja a termékeit és szolgáltatásait. Ezek épp úgy lefedik a kisebb igényű, hobbicélú felhasználókat, mint a komoly ipari igényű céges felhasználókat.

Csomagok összehasonlítása

A Mapbox csomagok árazása

Fejlődéstörténet

A Mapbox a fejlődését tekintve az alábbiak szerint különíthető el részekre/modulokra/termékekre (időrendben felsorolva, illetve a legfontosabb tulajdonságaikkal):

Mivel a Mapbox.js és a Mapbox GL JS is JavaScript alapú megoldás, ezért fontos lehet a kettő közti átjárhatóság. Ez azt jelenti, hogy ugyan nem automatikusan, de manuálisan a régebbi Mapbox.js projektek átalakíthatóak az újabb Mapbox GL JS alapú működésre. Ehhez a konverzióhoz az alábbi link nyújt hivatalos segítséget:

Converting a project from Mapbox.js to Mapbox GL JS

Példák (Mapbox.js)

Térkép (kezdő szint)

Minimális példa egy térkép megjelenítésére

A simple map

<!-- A simple map -->
<!-- Initialize a map in an HTML element with Mapbox.js. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>
<script>
	L.mapbox.accessToken = '<your access token here>';
	L.mapbox.accessToken = demoAccessToken;
	var map = L.mapbox.map('map', 'mapbox.streets')
		.setView([47.47, 19.06], 15);
</script>
</body>
</html>

Világtérkép folytonosságának kikapcsolása

Disable world wrapping

<!-- Disable world wrapping -->
<!-- Instead of loading tiles beyond -180 and 180, only show one copy of the world. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Disable world wrapping</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
	L.mapbox.accessToken = '<your access token here>';
	L.mapbox.accessToken = demoAccessToken;
	var map = L.mapbox.map('map', 'mapbox.streets', {
		// These options apply to the tile layer in the map.
		tileLayer: {
			// This map option disables world wrapping. by default, it is false.
			continuousWorld: false,
			// This option disables loading tiles outside of the world bounds.
			noWrap: true
		}
	}).setView([40, 0], 2);
</script>
</body>
</html>

Változtatható alapréteg

Toggling baselayers

<!-- Toggling baselayers -->
<!-- Toggling between three different baselayers. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Toggling baselayers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
  var map = L.mapbox.map('map', null, {
      maxZoom: 18
  }).setView([22.76, -25.84], 3);

  var layers = {
      Streets: L.mapbox.tileLayer('mapbox.streets'),
      Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
      Satellite: L.mapbox.tileLayer('mapbox.satellite')
  };

  layers.Streets.addTo(map);
  L.control.layers(layers).addTo(map);
</script>
</body>
</html>

Térkép nagyításának és mozgatásának letiltása

Disable zooming and panning

<!-- Disable zooming and panning -->
<!-- How to disable zooming and panning with Mapbox.js, our open source JavaScript library. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Disable zooming and panning</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {
  zoomControl: false
}).setView([41.0252, 28.9950], 11);

// Disable drag and zoom handlers.
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.keyboard.disable();

// Disable tap handler, if present.
if (map.tap) map.tap.disable();
</script>
</body>
</html>

Megnézhető térképterület leszűkítése határokkal

Using maxBounds to restrict map panning

<!-- Using maxBounds to restrict map panning -->
<!-- Preventing users from leaving an area on the map -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Using maxBounds to restrict map panning</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
// Construct a bounding box for this map that the user cannot
// move out of
var southWest = L.latLng(46.47, 17.06),
    northEast = L.latLng(48.47, 21.06),
    bounds = L.latLngBounds(southWest, northEast);

var map = L.mapbox.map('map', 'mapbox.streets', {
    // set that bounding box as maxBounds to restrict moving the map
    // see full maxBounds documentation:
    // http://leafletjs.com/reference.html#map-maxbounds
    maxBounds: bounds,
    maxZoom: 19,
    minZoom: 10
});

// zoom the map to that bounding box
map.fitBounds(bounds);
</script>
</body>
</html>

Dupla kattintásra nagyítás az adott területre középre helyezve + aránymérték

Double click to zoom

<!-- Double click to zoom -->
<!-- Listen for a double click event from a user and zoom in on the map. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Double click to zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {
    // Disable default double-click behavior.
    doubleClickZoom: false
})
.setView([46.695, 11.470], 4)
.on('dblclick', function(e) {
    // Zoom exactly to each double-clicked point
    map.setView(e.latlng, map.getZoom() + 1);
});

// L.control.scale() is included in Leaflet see
// https://www.mapbox.com/mapbox.js/api/v3.0.1/l-control-scale/
L.control.scale().addTo(map);
</script>
</body>
</html>

Töltésjelző megjelenítése

Show loading screen

<!-- Show loading screen -->
<!-- Use events to show when features are loading and loaded by displaying and hiding a loading message -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Show loading screen</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>

/*
 * This is a very simple version of a 'loading screen': there are much
 * fancier ones you can use instead, like
 * http://codepen.io/collection/HtAne/
 */
#loader {
    position:absolute; top:0; bottom:0; width:100%;
    background:rgba(255, 255, 255, 1);
    transition:background 1s ease-out;
    -webkit-transition:background 1s ease-out;
}
#loader.done {
    background:rgba(255, 255, 255, 0);
}
#loader.hide {
    display:none;
}
#loader .message {
    position:absolute;
    left:50%;
    top:50%;
}
</style>
<div id='map'></div>
<div id='loader'><span class='message'>loading</span></div>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var loader = document.getElementById('loader');

var map = L.mapbox.map('map')
    .setView([47.47, 19.06], 13);

// Add a tile layer with a loading animation

// start the loading screen
startLoading();
L.mapbox.tileLayer('mapbox.streets')
    .addTo(map) // add your tiles to the map
    .on('load', finishedLoading); // when the tiles load, remove the screen

function startLoading() {
    loader.className = '';
}

function finishedLoading() {
    // first, toggle the class 'done', which makes the loading screen
    // fade out
    loader.className = 'done';
    setTimeout(function() {
        // then, after a half-second, add the class 'hide', which hides
        // it completely and ensures that the user can interact with the
        // map again.
        loader.className = 'hide';
    }, 500);
}
</script>
</body>
</html>

Jelölők a térképen

Egyszerű jelölő ikonnal

Marker without GeoJSON

<!-- Marker without GeoJSON -->
<!-- Use L.mapbox.marker.icon to create a simple marker without GeoJSON. -->
<!-- Icon examples: https://www.mapbox.com/maki-icons/ -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker without GeoJSON</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([47.47, 19.06], 16);

// L.marker is a low-level marker constructor in Leaflet.
L.marker([47.47, 19.06], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'roadblock',
        'marker-color': '#fa0'
    })
}).addTo(map);
L.marker([47.4725, 19.0625], {
    icon: L.mapbox.marker.icon({
        'marker-size': 'large',
        'marker-symbol': 'college',
        'marker-color': '64BA49'
    })
}).addTo(map);
</script>
</body>
</html>

Jelölő koordinátáinak megjelenítése

Display latitude and longitude on marker movement

<!-- Display latitude and longitude on marker movement -->
<!-- Drag the marker to a new location on a map to view it's coordinates. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Display latitude and longitude on marker movement</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
pre.ui-coordinates {
  position:absolute;
  bottom:10px;
  left:10px;
  padding:5px 10px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-size:11px;
  line-height:18px;
  border-radius:3px;
  }
</style>
<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([0, 0], 3);

var coordinates = document.getElementById('coordinates');

var marker = L.marker([0, 0], {
    icon: L.mapbox.marker.icon({
      'marker-color': '#f86767'
    }),
    draggable: true
}).addTo(map);

// every time the marker is dragged, update the coordinates container
marker.on('dragend', ondragend);

// Set the initial marker coordinate on load.
ondragend();

function ondragend() {
    var m = marker.getLatLng();
    coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
}
</script>
</body>
</html>

Jelölőtől való távolság

Distance between two markers

<!-- Distance between two markers -->
<!-- Calculate the distance between two points in meters using distanceTo. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Distance between two markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
pre.ui-distance {
  position:absolute;
  bottom:10px;
  left:10px;
  padding:5px 10px;
  background:rgba(0,0,0,0.5);
  color:#fff;
  font-size:11px;
  line-height:18px;
  border-radius:3px;
  }
</style>
<div id='map'></div>
<pre id='distance' class='ui-distance'>Click to place a marker</pre>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([47.47, 19.06], 15);

// Start with a fixed marker.
var fixedMarker = L.marker(new L.LatLng(47.4725, 19.0625), {
    icon: L.mapbox.marker.icon({
        'marker-color': 'ff8888'
    })
}).bindPopup('ELTE Déli tömb').addTo(map);

// Store the fixedMarker coordinates in a variable.
var fc = fixedMarker.getLatLng();

// Create a featureLayer that will hold a marker and linestring.
var featureLayer = L.mapbox.featureLayer().addTo(map);

// When a user clicks on the map we want to
// create a new L.featureGroup that will contain a
// marker placed where the user selected the map and
// a linestring that draws itself between the fixedMarkers
// coordinates and the newly placed marker.
map.on('click', function(ev) {
    // ev.latlng gives us the coordinates of
    // the spot clicked on the map.
    var c = ev.latlng;

    var geojson = {
      type: 'FeatureCollection',
      features: [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [c.lng, c.lat]
          },
          "properties": {
            "marker-color": "#ff8888"
          }
        }, {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
              [fc.lng, fc.lat],
              [c.lng, c.lat]
            ]
          },
          "properties": {
            "stroke": "#000",
            "stroke-opacity": 0.5,
            "stroke-width": 4
          }
        }
      ]
    };

    featureLayer.setGeoJSON(geojson);

    // Finally, print the distance between these two points
    // on the screen using distanceTo().
    var container = document.getElementById('distance');
    container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm';
});
</script>
</body>
</html>

Navigáció jelölőket tartalmazó menüvel

Marker navigation from a marker menu

<!-- Marker navigation from a marker menu -->
<!-- Zoom to a marker and open its tooltip when a marker menu in a list is selected. -->
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker navigation from a marker menu</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
  .info {
    background:#fff;
    position:absolute;
    width:260px;
    top:10px;
    right:10px;
    border-radius:2px;
    }
    .info .item {
      display:block;
      border-bottom:1px solid #eee;
      padding:10px;
      text-decoration:none;
      }
      .info .item small { color:#888; }
      .info .item:hover,
      .info .item.active { background:#f8f8f8; }
      .info .item:last-child { border-bottom:none; }
</style>

<div id='map' class='map'></div>
<div id='info' class='info'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets').setView([47.47, 19.06], 15);

var myLayer = L.mapbox.featureLayer().addTo(map);

myLayer.setGeoJSON({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
          type: 'Point',
          coordinates: [19.0625, 47.4725]
      },
      properties: {
          title: 'ELTE Déli tömb',
          description: 'ELTE IK',
          'marker-id': 'marker-1',
          'marker-color': '#f86767'
      }
    },
    {
          type: 'Feature',
          geometry: {
              type: 'Point',
              coordinates: [19.0625, 47.4745]
          },
          properties: {
              title: 'ELTE Északi tömb',
              description: 'ELTE TTK',
              'marker-id': 'marker-2',
              'marker-color': '#f86767'
          }
      },
		{
		  type: 'Feature',
		  geometry: {
			  type: 'Point',
			  coordinates: [19.063425, 47.505258]
		  },
		  properties: {
			  title: 'Oktogon',
			  description: 'Oktogon metró állomás',
			  'marker-id': 'marker-2',
			  'marker-color': '#f86767',
			  'marker-symbol': 'rail-metro'
		  }
		}
  ]
});

var info = document.getElementById('info');

// Iterate through each feature layer item, build a
// marker menu item and enable a click event that pans to + opens
// a marker that's associated to the marker item.
myLayer.eachLayer(function(marker) {
  var link = info.appendChild(document.createElement('a'));
  link.className = 'item';
  link.href = '#';

  // Populate content from each markers object.
  link.innerHTML = marker.feature.properties.title +
    '<br /><small>' + marker.feature.properties.description + '</small>';
  link.onclick = function() {
    if (/active/.test(this.className)) {
      this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
    } else {
      var siblings = info.getElementsByTagName('a');
      for (var i = 0; i < siblings.length; i++) {
        siblings[i].className = siblings[i].className
          .replace(/active/, '').replace(/\s\s*$/, '');
      };
      this.className += ' active';

      // When a menu item is clicked, animate the map to center
      // its associated marker and open its popup.
      map.panTo(marker.getLatLng());
      marker.openPopup();
    }
    return false;
  };
});
</script>
</body>
</html>

Csak a környező jelölők megjelenítése

Marker radius search

<!-- Marker radius search -->
<!-- Use the .distanceTo function to only show markers within a range -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker radius search</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.emerald')
    .setView([40, -95], 4);

var RADIUS = 500000;
var filterCircle = L.circle(L.latLng(40, -75), RADIUS, {
    opacity: 1,
    weight: 1,
    fillOpacity: 0.4
}).addTo(map);

var csvLayer = omnivore.csv('./data/airports.csv', null, L.mapbox.featureLayer())
    .addTo(map);

map.on('mousemove', function(e) {
    filterCircle.setLatLng(e.latlng);
    csvLayer.setFilter(function showAirport(feature) {
        return e.latlng.distanceTo(L.latLng(
                feature.geometry.coordinates[1],
                feature.geometry.coordinates[0])) < RADIUS;
    });
});
</script>
</body>
</html>

Jelölő mozgatása programozottan

Marker movement

<!-- Marker movement -->
<!-- Simple marker animation. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker movement</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.light')
  .setView([0, 0], 3);

var marker = L.marker([0, 0], {
    icon: L.mapbox.marker.icon({
      'marker-color': '#f86767'
    })
});

var t = 0;
window.setInterval(function() {
    // Making a lissajous curve just for fun.
    // Create your own animated path here.
    marker.setLatLng(L.latLng(
        Math.cos(t * 0.5) * 10,
        Math.sin(t) * 10));
    t += 0.01; // Movement
}, 1); // Speed

marker.addTo(map);
</script>
</body>
</html>

Jelölő animálása geoJson vonalon

Animate a marker along line

<!-- Animate a marker along line -->
<!-- Create a marker and animate its position along the length of a line by looking up its coordinates. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Animate a marker along line</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 3);

// Generate a GeoJSON line. You could also load GeoJSON via AJAX
// or generate it some other way.
var geojson = { type: 'LineString', coordinates: [] };
var start = [0, 0];
var momentum = [2, 2];

for (var i = 0; i < 1000; i++) {
    start[0] += momentum[0];
    start[1] += momentum[1];
    if (start[1] > 30 || start[1] < -30) momentum[1] *= -1;
    if (start[0] > 90 || start[0] < -90) momentum[0] *= -1;
    geojson.coordinates.push(start.slice());
}

// Add this generated geojson object to the map.
L.geoJson(geojson).addTo(map);

// Create a counter with a value of 0.
var j = 0;

// Create a marker and add it to the map.
var marker = L.marker([0, 0], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#f86767'
  })
}).addTo(map);

tick();
function tick() {
    // Set the marker to be at the same point as one
    // of the segments or the line.
    marker.setLatLng(L.latLng(
        geojson.coordinates[j][1],
        geojson.coordinates[j][0]));

    // Move to the next point of the line
    // until `j` reaches the length of the array.
    if (++j < geojson.coordinates.length) setTimeout(tick, 20);
}
</script>
</body>
</html>

Tippek, üzenetek, szövegek

Egyedi jelölő tipp

Custom marker tooltips

<!-- Custom marker tooltips -->
<!-- How to create a custom marker tooltip with style text or images using Mapbox.js, our open source JavaScript library. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker tooltips</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
.leaflet-popup-content img {
  max-width:100%;
  }
</style>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([47.47, 19.06], 15);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geoJson = [{
    type: 'Feature',
    "geometry": { "type": "Point", "coordinates": [19.06, 47.47]},
    "properties": {
        "image": "http://hazai.kozep.bme.hu/wp-content/uploads/2013/06/00-Info-E-nyit%C3%B3.jpg",
        "url": "http://www.infopark.hu/",
        "marker-symbol": "star",
        "marker-color": "#ff8888",
        "marker-size": "large",
        "city": "Budapest - Infopark"
    }
	},
	{
		type: 'Feature',
		"geometry": { "type": "Point", "coordinates": [19.063, 47.473]},
		"properties": {
			"image": "http://photos.wikimapia.org/p/00/02/45/33/03_big.jpg",
			"url": "https://www.elte.hu/",
			"marker-symbol": "star",
			"marker-color": "#ff8888",
			"marker-size": "large",
			"city": "Budapest - ELTE Lágymányos"
		}
}];

// Add custom popups to each using our custom feature properties
myLayer.on('layeradd', function(e) {
    var marker = e.layer,
        feature = marker.feature;

    // Create custom popup content
    var popupContent =  '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
                            '<img src="' + feature.properties.image + '" />' +
                            feature.properties.city +
                        '</a>';

    // http://leafletjs.com/reference.html#popup
    marker.bindPopup(popupContent,{
        closeButton: false,
        minWidth: 480
    });
});

// Add features to the map
myLayer.setGeoJSON(geoJson);
</script>
</body>
</html>

Jelölőhöz tartozó tipp megjelenítése egérrel

Show tooltips on hover

<!-- Show tooltips on hover -->
<!-- How to show marker popups on hover with Mapbox.js, our open source JavaScript library. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Show tooltips on hover</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.light')
  .setView([47.47, 19.06], 15);

var myLayer = L.mapbox.featureLayer().addTo(map);

var geojson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        properties: {
            title: 'Bal alsó',
            'marker-color': '#f86767',
            'marker-size': 'small',
            'marker-symbol': 'star'
        },
        geometry: {
            type: 'Point',
            coordinates: [19.05, 47.46]
        }
    },
    {
        type: 'Feature',
        properties: {
            title: 'Jobb felső',
            'marker-color': '#7ec9b1',
            'marker-size': 'large',
            'marker-symbol': 'star'
        },
        geometry: {
            type: 'Point',
            coordinates: [19.07, 47.48]
        }
    }]
};

myLayer.setGeoJSON(geojson);
myLayer.on('mouseover', function(e) {
    e.layer.openPopup();
});
myLayer.on('mouseout', function(e) {
    e.layer.closePopup();
});
</script>
</body>
</html>

Helyek

Hely keresése automatikus kiegészítéssel

Geocoding with autocomplete

<!-- Geocoding with autocomplete -->
<!-- Using the Mapbox Geocoding API to show real-time search suggestions. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geocoding with autocomplete</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
L.mapbox.map('map', 'mapbox.streets')
    .addControl(L.mapbox.geocoderControl('mapbox.places', {
        autocomplete: true
    }));
</script>
</body>
</html>

Hely lekérdezése név alapján (Geocoderrel)

Use geocoder to set map position

<!-- Use geocoder to set map position -->
<!-- Using the Mapbox Geocoding API initially set map position on Chester, New Jersey. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Use geocoder to set map position</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var geocoder = L.mapbox.geocoder('mapbox.places'),
    map = L.mapbox.map('map', 'examples.map-h67hf2ic');

geocoder.query('Tab, HU', showMap);

function showMap(err, data) {
    // The geocoder can return an area, like a city, or a
    // point, like an address. Here we handle both cases,
    // by fitting the map bounds to an area or zooming to a point.
    if (data.lbounds) {
        map.fitBounds(data.lbounds);
    } else if (data.latlng) {
        map.setView([data.latlng[0], data.latlng[1]], 13);
    }
}
</script>
</body>
</html>

Aktuális pozíció megjelenítése (megközelítőleg)

Geolocation

FONTOS: A Geolocation, azaz helymeghatározás használatához valid HTTPS kapcsolat szükséges.

<!-- Geolocation -->
<!-- Finding the user's position -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Geolocation</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
.ui-button {
  background:#3887BE;
  color:#FFF;
  display:block;
  position:absolute;
  top:50%;left:50%;
  width:160px;
  margin:-20px 0 0 -80px;
  z-index:100;
  text-align:center;
  padding:10px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  }
  .ui-button:hover {
    background:#3074a4;
    color:#fff;
    }
</style>

<div id='map'></div>
<a href='#' id='geolocate' class='ui-button'>Find me</a>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var geolocate = document.getElementById('geolocate');
var map = L.mapbox.map('map', 'mapbox.streets');

var myLayer = L.mapbox.featureLayer().addTo(map);

// This uses the HTML5 geolocation API, which is available on
// most mobile browsers and modern browsers, but not in Internet Explorer
//
// See this chart of compatibility for details:
// http://caniuse.com/#feat=geolocation
if (!navigator.geolocation) {
    geolocate.innerHTML = 'Geolocation is not available';
} else {
    geolocate.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        map.locate();
    };
}

// Once we've got a position, zoom and center the map
// on it, and add a single marker.
map.on('locationfound', function(e) {
    map.fitBounds(e.bounds);

    myLayer.setGeoJSON({
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [e.latlng.lng, e.latlng.lat]
        },
        properties: {
            'title': 'Here I am!',
            'marker-color': '#ff8888',
            'marker-symbol': 'star'
        }
    });

    // And hide the geolocation button
    geolocate.parentNode.removeChild(geolocate);
});

// If the user chooses not to allow their location
// to be shared, display an error message.
map.on('locationerror', function() {
    geolocate.innerHTML = 'Position could not be found';
});
</script>
</body>
</html>

Útvonaltervezés (Autós, biciklis, gyalogos közlekedéssel)

Directions

<!-- Directions -->
<!-- Use the mapbox-directions.js plugin to show results from the Mapbox Directions API -->

<html>
<head>
<meta charset=utf-8 />
<title>Directions</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<style>
#inputs,
#errors,
#directions {
    position: absolute;
    width: 33.3333%;
    max-width: 300px;
    min-width: 200px;
}

#inputs {
    z-index: 10;
    top: 10px;
    left: 10px;
}

#directions {
    z-index: 99;
    background: rgba(0,0,0,.8);
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

#errors {
    z-index: 8;
    opacity: 0;
    padding: 10px;
    border-radius: 0 0 3px 3px;
    background: rgba(0,0,0,.25);
    top: 90px;
    left: 10px;
}

</style>

<script src='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.css' type='text/css' />

<div id='map'></div>
<div id='inputs'></div>
<div id='errors'></div>
<div id='directions'>
  <div id='routes'></div>
  <div id='instructions'></div>
</div>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {
    zoomControl: false
}).setView([47.47, 19.06], 15);

// move the attribution control out of the way
map.attributionControl.setPosition('bottomleft');

// create the initial directions object, from which the layer
// and inputs will pull data.
var directions = L.mapbox.directions();

var directionsLayer = L.mapbox.directions.layer(directions)
    .addTo(map);

var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions)
    .addTo(map);

var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions)
    .addTo(map);

var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
    .addTo(map);

var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions)
    .addTo(map);
</script>
</body>
</html>

Plugin támogatás és a Mapbox

Leaflet-MiniMap

<!-- Leaflet-MiniMap -->
<!-- Display a smaller navigable map using the Leaflet-MiniMap plugin. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet-MiniMap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />

<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .on('ready', function() {
        new L.Control.MiniMap(L.mapbox.tileLayer('mapbox.streets'))
            .addTo(map);
    });
</script>
</body>
</html>

Leaflet Fullscreen

<!-- Leaflet Fullscreen -->
<!-- Add a control to enable a map to be in full screen mode. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Fullscreen</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([47.47, 19.06], 15);

L.control.fullscreen().addTo(map);
</script>
</body>
</html>

Leaflet Heat

<!-- Leaflet Heat -->
<!-- Initially draw heatmap data on a map and allow a users mouse movement to draw their own. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Heat</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-heat/v0.1.3/leaflet-heat.js'></script>
<div id='map'></div>

<!-- Example data. (near Hamilton, New Zealand)-->
<script src='./data/realworld.388.js'></script>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
    var map = L.mapbox.map('map', 'mapbox.dark')
        .setView([47.47, 19.06], 15);

    var heat = L.heatLayer(addressPoints, {maxZoom: 18}).addTo(map);
    var draw = false;

    // add points on mouse move (except when interacting with the map)
    map.on({
        click:   function () { draw = !draw; },
        mousemove: function (e) {
            if (draw) {
                heat.addLatLng(e.latlng);
            }
        }
    })
</script>
</body>
</html>

Leaflet Markercluster

<!-- Leaflet Markercluster -->
<!-- Using the Leaflet Markercluster plugin -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Markercluster</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />

<!-- Example data. (near Hamilton, New Zealand)-->
<script src="./data/realworld.388.js"></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
    var map = L.mapbox.map('map', 'mapbox.streets')
        .setView([-37.82, 175.215], 14);

    var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
            title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers);
</script>
</body>
</html>

Listing markers in clusters

<!-- Listing markers in clusters -->
<!-- Show a list of clustered markers by their coordinates on a map with Mapbox.js. -->

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Listing markers in clusters</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<script>
var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
</script>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />

<style>
pre.ui-coordinates {
  background:rgba(0,0,0,0.5);
  position:absolute;
  bottom:10px;
  left:10px;
  padding:5px 10px;
  color:#fff;
  font-size:11px;
  line-height:18px;
  border-radius:3px;
  max-height:240px;
  overflow:auto;
  width:100px;
  }
</style>

<div id='map'></div>
<pre id='coordinates' class='ui-coordinates'></pre>

<!-- Example data. (near Hamilton, New Zealand)-->
<script src="./data/realworld.388.js"></script>
<script>
L.mapbox.accessToken = '<your access token here>';
L.mapbox.accessToken = demoAccessToken;
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([-37.82, 175.215], 14);;

var markers = new L.MarkerClusterGroup();

for (var i = 0; i < addressPoints.length; i++) {
    var a = addressPoints[i];
    var title = a[2];
    var marker = L.marker(new L.LatLng(a[0], a[1]), {
        icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
        title: title
    });
    marker.bindPopup(title);
    markers.addLayer(marker);
}

map.addLayer(markers);

function onmove() {
    // Get the map bounds - the top-left and bottom-right locations.
    var inBounds = [],
        bounds = map.getBounds();
    markers.eachLayer(function(marker) {
        // For each marker, consider whether it is currently visible by comparing
        // with the current map bounds.
        if (bounds.contains(marker.getLatLng())) {
            inBounds.push(marker.options.title);
        }
    });
    // Display a list of markers.
    document.getElementById('coordinates').innerHTML = inBounds.join('\n');
}

map.on('move', onmove);

// call onmove off the bat so that the list is populated.
// otherwise, there will be no markers listed until the map is moved.
onmove();
</script>
</body>
</html>

Az újabb irányvonal: a Mapbox GL JS megvalósítása és működése a háttérben

Három alapvető működési egység és feladatkör különíthető el a Mapbox működésében. Ezek a következők:

térkép
adat
elemzés

Térkép: Mapbox GL a rendereléshez

A térkép megjelenítését a GPU végzi Mapbox GL segítségével. A legfontosabb jellemzői:

A régi raszteres adatokkal (png csempék) szemben, itt vektoros adatok (vektoros csempék) vannak.
A megjelenítéskor rugalmasan kezelhetőek a stílusok (style JSON segítségével).
Kliens oldali renderelés (Open/Web GL alapon).
Az adatok külön rétegek a térképen, nem képezik szerves és elválaszthatatlan részét.

Mapbox GL

Példa:

var map = new mapboxgl.Map({
  container: 'map',
  center: [47.47, 19.06],
  zoom: 15,
  style: style_object,
  hash: true
});

Mapbox GL API dokumentáció

Adat: Vector Tile

A Vector Tile egy nyílt szabvány webes térképek adatainak kódolásához.

Vector Tile ábrázolása

Vector Tile példa

Elemzés: Turf.js

A térkép adatain elvégezhetünk különféle térinformatikai műveleteket és elemzéseket. Erre a célra szolgál a Turj.js nevű nyílt forráskódú JavaScript könyvtár, melyet a Mapbox is beépítetten használ. Néhány ilyen térinformatikai művelet a Turf.js képességei közül:

Méretarány, mérték, távolságmérés kezelése
Transzformáció (például: buffer terület, unió, metszet és különbség képzés)
Pontok, poligonok és multipoligonok kezelése
Interpoláció
Adat osztályozás
Mértékegység konverzió
Rácsok, hálózatok elemzése
Aggregációs és statisztikai függvények

Turf.js

Példa:

var poly1 = {
  "type": "Feature",
  "properties": {
    "fill": "#0f0"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [[
      [-82.574787, 35.594087],
      [-82.574787, 35.615581],
      [-82.545261, 35.615581],
      [-82.545261, 35.594087],
      [-82.574787, 35.594087]
    ]]
  }
};
var poly2 = {
  "type": "Feature",
  "properties": {
    "fill": "#00f"
  },
  "geometry": {
    "type": "Polygon",
    "coordinates": [[
      [-82.560024, 35.585153],
      [-82.560024, 35.602602],
      [-82.52964, 35.602602],
      [-82.52964, 35.585153],
      [-82.560024, 35.585153]
    ]]
  }
};

var union = turf.union(poly1, poly2);

Turf.js API dokumentáció

Komponensek közötti kapcsolat

A Mapbox, illetve annak webes Mapbox.js nevű megoldása, ezen különálló komponensek egyfajta "wrapper" megvalósítása az egyszerűbb és egységesebb kezelhetőség érdekében.

Megjelenítés, renderelés

Elemzés, szűrés

Példák (Mapbox GL JS)

Minimális példa egy térkép megjelenítésére

Display a map

<!-- Display a map -->
<!-- Initialize a map in an HTML element with Mapbox GL JS. -->

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
	<script>
		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
	</script>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
mapboxgl.accessToken = demoAccessToken;
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
    center: [19.06, 47.47], // starting position
    zoom: 15 // starting zoom
});
</script>

</body>
</html>

Vector tile forrás hozzáadása a térképhez

Add a vector tile source

<!-- Add a vector tile source -->
<!-- Add a vector source to a map. -->

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
	<script>
		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
	</script>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
mapboxgl.accessToken = demoAccessToken;
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    zoom: 15,
    center: [19.06, 47.47]
});

map.on('load', function () {

    map.addLayer({
        "id": "terrain-data",
        "type": "line",
        "source": {
            type: 'vector',
            url: 'mapbox://mapbox.mapbox-terrain-v2'
        },
        "source-layer": "contour",
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#ff69b4",
            "line-width": 1
        }
    });
});
</script>
</body>
</html>

Külső forrásból származó vector tile hozzáadása a térképhez

Add a third party vector tile source

<!-- Add a third party vector tile source -->
<!-- Render a map using an external vector source of OpenStreetMap data provided by Mapzen. -->

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
	<script>
		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
	</script>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
mapboxgl.accessToken = demoAccessToken;
var simple = {
    "version": 8,
    "sources": {
        "osm": {
            "type": "vector",
            "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4"]
        }
    },
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#41afa5"
            }
        }, {
            "id": "water",
            "type": "fill",
            "source": "osm",
            "source-layer": "water",
            "filter": ["==", "$type", "Polygon"],
            "paint": {
                "fill-color": "#3887be"
            }
        }
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: simple,
    zoom: 1,
    center: [-14, 35]
});

map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>

Felhasználás, alkalmazás

A Foursquare is Mapbox-ra váltott

A Foursquare 2012-ben lecserélte a Google térképszolgáltatására épülő webes felületét egy Mapbox alapú verzióra. Ezzel az újítással a felhasználók már egy színesebb, több információt tartalmazó térképpel találkozhatnak a Foursquare weboldalán. Mindezzel együtt a térképes adatok, képek szolgáltatását sem a Google Maps biztosítja, hanem a szintén népszerű OpenStreetMap. Az OpenStreetMap térképei a világ legtöbb pontján, így Magyarországon is nagyon pontosak és részletesek, és mivel nyílt rendszerről van szó, semmi sem akadályozza a folyamatos fejlődést.

Mapbox és WordPress: látványos térképek WordPress oldalon kódolás nélkül

Hivatalos bővítmény

Elavult verziójú, feltehetően nem fejlesztik tovább.

Harmadik féltől származó bővítmény

Mapbox for Wordpress Advanced

Harmadik féltől származó bővítmény

A Mapbox for Wordpress Advanced nevű WordPress bővítménnyel egyszerűen lehet térképeket hozzáadni egy WordPress oldalhoz. Ehhez nem kell mást tenni, mint letölteni a bővítményt az alábbi linken:

Mapbox for Wordpress Advanded letöltése

Majd a bővítményt feltölteni az adott WordPress oldalra és aktiválni. Ezután egy meglévő Mapbox felhasználói fiókon keresztül Mapbox Studio Classic használatával elkészíthető a kívánt térkép. Végül az elkészített térképhez tartozó Access Token-t és térkép ID-t meg kell adni a Mapbox for Wordpress Advanced bővítménynek.

Mapbox működés közben egy WordPress oldalon

További érdekességek

Térkép a Twitter első 6 milliárd geotaggel ellátott fotója alapján

Egy speciális világatlaszt készített a nagyvárosokról Eric Fischer, a Mapbox fejlesztője, aki a Twitter indulása óta megosztott összes geotaggel, vagyis földrajzi koordinátákkal ellátott több mint 6 milliárd bejegyzést használta fel hozzá. Első körben azt vizsgálta, hogy melyek azon régiók, kerületek, ahol a legsűrűbben fotóznak.

Twitteres geotaggel ellátott fotók térképe

Locals and Tourists - Budapest

A projektet továbbgondolva Fischer megkülönböztette a képeket készítő helybelieket a turistáktól. Így létrejött a Locals and Tourists nevű projektje, melynek keretében már azt is elkülönítette, hogy a képeket helybeliek vagy turisták készíthették.

Kék a helyi lakos, piros a turista Fischer azokat a személyeket számolta helyi lakosnak, aki egy hónapnál hosszabb ideje készít földrajzi címkékkel rendelkező fotókat egy adott térségben: őket jelölte kék színnel. A pirossal kiemelt turista kategóriába azok tartoznak, akik egy hónapnál kevesebb ideig készítettek és osztottak meg egy helyszínről képeket. A sárga pontok alatt azokat kell érteni, akiknél mindez nem volt egyértelműen meghatározható.

Budapest térképrészletére tekintve a legnépszerűbb turistacélpontok között a Hősök tere, a Városliget, a Lánchíd, és a Gellért-hegy is jól látható.

Átdolgozott, teljesértékű interaktív világtérképre bővített verzió:

Twitter Locals and Tourists project

@@ 29. sor: / 29. sor: @@
 [[Fájl:mapbox_pricing01.png|frame|center|link=https://www.mapbox.com/pricing/|alt=Mapbox csomagok árazása|A Mapbox csomagok árazása]]
-== Megvalósítás és működés a háttérben ==
+== Fejlődéstörténet ==
-Három alapvető működési egység és feladatkör különíthető el a Mapbox működésében. Ezek a következők:
+A Mapbox a fejlődését tekintve az alábbiak szerint különíthető el részekre/modulokra/termékekre (időrendben felsorolva, illetve a legfontosabb tulajdonságaikkal):
-* '''térkép'''
-* '''adat'''
-* '''elemzés'''
-=== Térkép: Mapbox GL a rendereléshez ===
+* [https://www.mapbox.com/blog/mapbox-js-with-leaflet/ Mapbox.js (JavaScript, előgenerált raszteres csempék, Leaflet kompatibilitás)]
+* [https://www.mapbox.com/blog/mapbox-gl/ Mapbox GL (vektoros, OpenGL alapú, kliensoldali renderelés)]
+* [https://www.mapbox.com/blog/mapbox-gl-js/ Mapbox GL JS (JavaScript, WebGL, kliensoldali renderelés)]
-A térkép megjelenítését a GPU végzi '''Mapbox GL''' segítségével. A legfontosabb jellemzői:
+Mivel a Mapbox.js és a Mapbox GL JS is JavaScript alapú megoldás, ezért fontos lehet a kettő közti átjárhatóság. Ez azt jelenti, hogy ugyan nem automatikusan, de manuálisan a régebbi Mapbox.js projektek átalakíthatóak az újabb Mapbox GL JS alapú működésre. Ehhez a konverzióhoz az alábbi link nyújt hivatalos segítséget:
-* A régi raszteres adatokkal (png csempék) szemben, itt vektoros adatok (vektoros csempék) vannak.
-* A megjelenítéskor rugalmasan kezelhetőek a stílusok (style JSON segítségével).
-* Kliens oldali renderelés (Open/Web GL alapon).
-* Az adatok külön rétegek a térképen, nem képezik szerves és elválaszthatatlan részét.
-[[Fájl:mapbox_mapboxgl_03.png|frame|center|alt=Mapbox GL|Mapbox GL]]
+[https://www.mapbox.com/blog/mapbox-js-to-gl-js/ Converting a project from Mapbox.js to Mapbox GL JS]
-Példa:
+== Példák (Mapbox.js) ==
-<syntaxhighlight lang="html5">
-var map = new mapboxgl.Map({
-  container: 'map',
-  center: [47.47, 19.06],
-  zoom: 15,
-  style: style_object,
-  hash: true
-});
-</syntaxhighlight>
-[https://www.mapbox.com/mapbox-gl-js/api Mapbox GL API dokumentáció]
+=== Térkép (kezdő szint) ===
+==== Minimális példa egy térkép megjelenítésére ====
-=== Adat: Vector Tile ===
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/simple_map.html A simple map]
-A '''Vector Tile''' egy nyílt szabvány webes térképek adatainak kódolásához.
+<syntaxhighlight lang="html5">
+<!-- A simple map -->
+<!-- Initialize a map in an HTML element with Mapbox.js. -->
-[[Fájl:mapbox_vectortile_01.png|frame|center|alt=Vector Tile ábrázolása|Vector Tile ábrázolása]]
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>A simple map</title>
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
+<style>
+	body { margin:0; padding:0; }
+	#map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+<script>
+	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+</script>
+</head>
+<body>
+<div id='map'></div>
+<script>
+	L.mapbox.accessToken = '<your access token here>';
+	L.mapbox.accessToken = demoAccessToken;
+	var map = L.mapbox.map('map', 'mapbox.streets')
+		.setView([47.47, 19.06], 15);
+</script>
+</body>
+</html>
+</syntaxhighlight>
-[[Fájl:mapbox_vectortile_02.png|frame|center|alt=Vector Tile példa|Vector Tile példa]]
+==== Világtérkép folytonosságának kikapcsolása ====
-=== Elemzés: Turf.js ===
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/disable_world_wrapping.html Disable world wrapping]
-A térkép adatain elvégezhetünk különféle térinformatikai műveleteket és elemzéseket. Erre a célra szolgál a '''Turj.js''' nevű nyílt forráskódú JavaScript könyvtár, melyet a Mapbox is beépítetten használ.
+<syntaxhighlight lang="html5">
-Néhány ilyen térinformatikai művelet a Turf.js képességei közül:
+<!-- Disable world wrapping -->
-* Méretarány, mérték, távolságmérés kezelése
+<!-- Instead of loading tiles beyond -180 and 180, only show one copy of the world. -->
-* Transzformáció (például: buffer terület, unió, metszet és különbség képzés)
-* Pontok, poligonok és multipoligonok kezelése
-* Interpoláció
-* Adat osztályozás
-* Mértékegység konverzió
-* Rácsok, hálózatok elemzése
-* Aggregációs és statisztikai függvények
-[[Fájl:mapbox_turf_03.png|frame|center|alt=Turf.js|Turf.js]]
+<!DOCTYPE html>
+<html>
-Példa:
+<head>
-<syntaxhighlight lang="html5">
+<meta charset=utf-8 />
-var poly1 = {
+<title>Disable world wrapping</title>
-  "type": "Feature",
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-  "properties": {
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-    "fill": "#0f0"
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-  },
+<style>
-  "geometry": {
+	body { margin:0; padding:0; }
-    "type": "Polygon",
+	#map { position:absolute; top:0; bottom:0; width:100%; }
-    "coordinates": [[
+</style>
-      [-82.574787, 35.594087],
+<script>
-      [-82.574787, 35.615581],
+	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-      [-82.545261, 35.615581],
+</script>
-      [-82.545261, 35.594087],
+</head>
-      [-82.574787, 35.594087]
+<body>
-    ]]
+<div id='map'></div>
-  }
-};
+<script>
-var poly2 = {
+	L.mapbox.accessToken = '<your access token here>';
-  "type": "Feature",
+	L.mapbox.accessToken = demoAccessToken;
-  "properties": {
+	var map = L.mapbox.map('map', 'mapbox.streets', {
-    "fill": "#00f"
+		// These options apply to the tile layer in the map.
-  },
+		tileLayer: {
-  "geometry": {
+			// This map option disables world wrapping. by default, it is false.
-    "type": "Polygon",
+			continuousWorld: false,
-    "coordinates": [[
+			// This option disables loading tiles outside of the world bounds.
-      [-82.560024, 35.585153],
+			noWrap: true
-      [-82.560024, 35.602602],
+		}
-      [-82.52964, 35.602602],
+	}).setView([40, 0], 2);
-      [-82.52964, 35.585153],
+</script>
-      [-82.560024, 35.585153]
+</body>
-    ]]
+</html>
-  }
+</syntaxhighlight>
-};
-var union = turf.union(poly1, poly2);
+==== Változtatható alapréteg ====
-</syntaxhighlight>
-[http://turfjs.org/docs Turf.js API dokumentáció]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/toggling_baselayers.html Toggling baselayers]
-=== Komponensek közötti kapcsolat ===
-A Mapbox, illetve annak webes Mapbox.js nevű megoldása, ezen különálló komponensek egyfajta "wrapper" megvalósítása az egyszerűbb és egységesebb kezelhetőség érdekében.
-[[Fájl:mapbox_rendereles_01.png|frame|center|alt=Megjelenítés, renderelés|Megjelenítés, renderelés]]
-[[Fájl:mapbox_elemzes_01.png|frame|center|alt=Elemzés, szűrés|Elemzés, szűrés]]
-== Példák (Mapbox használata webes környezetben, azaz Mapbox.js) ==
-=== Térkép (kezdő szint) ===
-==== Minimális példa egy térkép megjelenítésére ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/simple_map.html A simple map]
 <syntaxhighlight lang="html5">
-<!-- A simple map -->
+<!-- Toggling baselayers -->
-<!-- Initialize a map in an HTML element with Mapbox.js. -->
+<!-- Toggling between three different baselayers. -->
 <!DOCTYPE html>
@@ 144. sor: / 136. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>A simple map</title>
+<title>Toggling baselayers</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
 <style>
-	body { margin:0; padding:0; }
+  body { margin:0; padding:0; }
-	#map { position:absolute; top:0; bottom:0; width:100%; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 <script>
-	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 </script>
 </head>
 <body>
 <div id='map'></div>
 <script>
-	L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = '<your access token here>';
-	L.mapbox.accessToken = demoAccessToken;
+L.mapbox.accessToken = demoAccessToken;
-	var map = L.mapbox.map('map', 'mapbox.streets')
+  var map = L.mapbox.map('map', null, {
-		.setView([47.47, 19.06], 15);
+      maxZoom: 18
+  }).setView([22.76, -25.84], 3);
+  var layers = {
+      Streets: L.mapbox.tileLayer('mapbox.streets'),
+      Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
+      Satellite: L.mapbox.tileLayer('mapbox.satellite')
+  };
+  layers.Streets.addTo(map);
+  L.control.layers(layers).addTo(map);
 </script>
 </body>
@@ 168. sor: / 171. sor: @@
 </syntaxhighlight>
-==== Világtérkép folytonosságának kikapcsolása ====
+==== Térkép nagyításának és mozgatásának letiltása ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/disable_world_wrapping.html Disable world wrapping]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/disable_zooming_and_panning.html Disable zooming and panning]
 <syntaxhighlight lang="html5">
-<!-- Disable world wrapping -->
+<!-- Disable zooming and panning -->
-<!-- Instead of loading tiles beyond -180 and 180, only show one copy of the world. -->
+<!-- How to disable zooming and panning with Mapbox.js, our open source JavaScript library. -->
 <!DOCTYPE html>
@@ 180. sor: / 183. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Disable world wrapping</title>
+<title>Disable zooming and panning</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
 <style>
-	body { margin:0; padding:0; }
+  body { margin:0; padding:0; }
-	#map { position:absolute; top:0; bottom:0; width:100%; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 <script>
@@ 196. sor: / 199. sor: @@
 <script>
-	L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = '<your access token here>';
-	L.mapbox.accessToken = demoAccessToken;
+L.mapbox.accessToken = demoAccessToken;
-	var map = L.mapbox.map('map', 'mapbox.streets', {
+var map = L.mapbox.map('map', 'mapbox.streets', {
-		// These options apply to the tile layer in the map.
+  zoomControl: false
-		tileLayer: {
+}).setView([41.0252, 28.9950], 11);
-			// This map option disables world wrapping. by default, it is false.
-			continuousWorld: false,
-			// This option disables loading tiles outside of the world bounds.
-			noWrap: true
-		}
-	}).setView([40, 0], 2);
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Változtatható alapréteg ====
+// Disable drag and zoom handlers.
+map.dragging.disable();
+map.touchZoom.disable();
+map.doubleClickZoom.disable();
+map.scrollWheelZoom.disable();
+map.keyboard.disable();
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/toggling_baselayers.html Toggling baselayers]
+// Disable tap handler, if present.
+if (map.tap) map.tap.disable();
+</script>
+</body>
+</html>
+</syntaxhighlight>
+==== Megnézhető térképterület leszűkítése határokkal ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/using_maxbounds_to_restrict_map_panning.html Using maxBounds to restrict map panning]
 <syntaxhighlight lang="html5">
-<!-- Toggling baselayers -->
+<!-- Using maxBounds to restrict map panning -->
-<!-- Toggling between three different baselayers. -->
+<!-- Preventing users from leaving an area on the map -->
 <!DOCTYPE html>
@@ 224. sor: / 231. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Toggling baselayers</title>
+<title>Using maxBounds to restrict map panning</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 242. sor: / 249. sor: @@
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-  var map = L.mapbox.map('map', null, {
+// Construct a bounding box for this map that the user cannot
-      maxZoom: 18
+// move out of
-  }).setView([22.76, -25.84], 3);
+var southWest = L.latLng(46.47, 17.06),
+    northEast = L.latLng(48.47, 21.06),
+    bounds = L.latLngBounds(southWest, northEast);
-  var layers = {
+var map = L.mapbox.map('map', 'mapbox.streets', {
-      Streets: L.mapbox.tileLayer('mapbox.streets'),
+    // set that bounding box as maxBounds to restrict moving the map
-      Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
+    // see full maxBounds documentation:
-      Satellite: L.mapbox.tileLayer('mapbox.satellite')
+    // http://leafletjs.com/reference.html#map-maxbounds
-  };
+    maxBounds: bounds,
+    maxZoom: 19,
+    minZoom: 10
+});
-  layers.Streets.addTo(map);
+// zoom the map to that bounding box
-  L.control.layers(layers).addTo(map);
+map.fitBounds(bounds);
 </script>
 </body>
@@ 259. sor: / 271. sor: @@
 </syntaxhighlight>
-==== Térkép nagyításának és mozgatásának letiltása ====
+==== Dupla kattintásra nagyítás az adott területre középre helyezve + aránymérték ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/disable_zooming_and_panning.html Disable zooming and panning]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/double_click_to_zoom_+_scale_control.html Double click to zoom]
 <syntaxhighlight lang="html5">
-<!-- Disable zooming and panning -->
+<!-- Double click to zoom -->
-<!-- How to disable zooming and panning with Mapbox.js, our open source JavaScript library. -->
+<!-- Listen for a double click event from a user and zoom in on the map. -->
 <!DOCTYPE html>
@@ 271. sor: / 283. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Disable zooming and panning</title>
+<title>Double click to zoom</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 290. sor: / 302. sor: @@
 L.mapbox.accessToken = demoAccessToken;
 var map = L.mapbox.map('map', 'mapbox.streets', {
-  zoomControl: false
+    // Disable default double-click behavior.
-}).setView([41.0252, 28.9950], 11);
+    doubleClickZoom: false
+})
+.setView([46.695, 11.470], 4)
+.on('dblclick', function(e) {
+    // Zoom exactly to each double-clicked point
+    map.setView(e.latlng, map.getZoom() + 1);
+});
-// Disable drag and zoom handlers.
+// L.control.scale() is included in Leaflet see
-map.dragging.disable();
+// https://www.mapbox.com/mapbox.js/api/v3.0.1/l-control-scale/
-map.touchZoom.disable();
+L.control.scale().addTo(map);
-map.doubleClickZoom.disable();
-map.scrollWheelZoom.disable();
-map.keyboard.disable();
-// Disable tap handler, if present.
-if (map.tap) map.tap.disable();
 </script>
 </body>
@@ 307. sor: / 319. sor: @@
 </syntaxhighlight>
-==== Megnézhető térképterület leszűkítése határokkal ====
+==== Töltésjelző megjelenítése ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/using_maxbounds_to_restrict_map_panning.html Using maxBounds to restrict map panning]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/show_loading_screen.html Show loading screen]
 <syntaxhighlight lang="html5">
-<!-- Using maxBounds to restrict map panning -->
+<!-- Show loading screen -->
-<!-- Preventing users from leaving an area on the map -->
+<!-- Use events to show when features are loading and loaded by displaying and hiding a loading message -->
 <!DOCTYPE html>
@@ 319. sor: / 331. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Using maxBounds to restrict map panning</title>
+<title>Show loading screen</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
 <style>
-  body { margin:0; padding:0; }
+	body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
+	#map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 <script>
@@ 332. sor: / 344. sor: @@
 </head>
 <body>
-<div id='map'></div>
+<style>
-<script>
+/*
-L.mapbox.accessToken = '<your access token here>';
+ * This is a very simple version of a 'loading screen': there are much
-L.mapbox.accessToken = demoAccessToken;
+ * fancier ones you can use instead, like
-// Construct a bounding box for this map that the user cannot
+ * http://codepen.io/collection/HtAne/
-// move out of
+ */
-var southWest = L.latLng(46.47, 17.06),
+#loader {
-    northEast = L.latLng(48.47, 21.06),
+    position:absolute; top:0; bottom:0; width:100%;
-    bounds = L.latLngBounds(southWest, northEast);
+    background:rgba(255, 255, 255, 1);
+    transition:background 1s ease-out;
-var map = L.mapbox.map('map', 'mapbox.streets', {
+    -webkit-transition:background 1s ease-out;
-    // set that bounding box as maxBounds to restrict moving the map
+}
-    // see full maxBounds documentation:
+#loader.done {
-     // http://leafletjs.com/reference.html#map-maxbounds
+    background:rgba(255, 255, 255, 0);
-    maxBounds: bounds,
+}
-    maxZoom: 19,
+#loader.hide {
-    minZoom: 10
+    display:none;
-});
+}
+#loader .message {
+    position:absolute;
+    left:50%;
+    top:50%;
+}
+</style>
+<div id='map'></div>
+<div id='loader'><span class='message'>loading</span></div>
+<script>
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+var loader = document.getElementById('loader');
+var map = L.mapbox.map('map')
+     .setView([47.47, 19.06], 13);
-// zoom the map to that bounding box
+// Add a tile layer with a loading animation
-map.fitBounds(bounds);
+// start the loading screen
+startLoading();
+L.mapbox.tileLayer('mapbox.streets')
+    .addTo(map) // add your tiles to the map
+    .on('load', finishedLoading); // when the tiles load, remove the screen
+function startLoading() {
+    loader.className = '';
+}
+function finishedLoading() {
+    // first, toggle the class 'done', which makes the loading screen
+    // fade out
+    loader.className = 'done';
+    setTimeout(function() {
+        // then, after a half-second, add the class 'hide', which hides
+        // it completely and ensures that the user can interact with the
+        // map again.
+        loader.className = 'hide';
+    }, 500);
+}
 </script>
 </body>
@@ 359. sor: / 407. sor: @@
 </syntaxhighlight>
-==== Dupla kattintásra nagyítás az adott területre középre helyezve + aránymérték ====
+=== Jelölők a térképen ===
+==== Egyszerű jelölő ikonnal ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/double_click_to_zoom_+_scale_control.html Double click to zoom]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_without_geojson.html Marker without GeoJSON]
 <syntaxhighlight lang="html5">
-<!-- Double click to zoom -->
+<!-- Marker without GeoJSON -->
-<!-- Listen for a double click event from a user and zoom in on the map. -->
+<!-- Use L.mapbox.marker.icon to create a simple marker without GeoJSON. -->
+<!-- Icon examples: https://www.mapbox.com/maki-icons/ -->
 <!DOCTYPE html>
@@ 371. sor: / 422. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Double click to zoom</title>
+<title>Marker without GeoJSON</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 380. sor: / 431. sor: @@
 </style>
 <script>
-	var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 </script>
 </head>
@@ 389. sor: / 440. sor: @@
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets', {
+var map = L.mapbox.map('map', 'mapbox.streets')
-    // Disable default double-click behavior.
+     .setView([47.47, 19.06], 16);
-     doubleClickZoom: false
-})
-.setView([46.695, 11.470], 4)
-.on('dblclick', function(e) {
-    // Zoom exactly to each double-clicked point
-    map.setView(e.latlng, map.getZoom() + 1);
-});
-// L.control.scale() is included in Leaflet see
+// L.marker is a low-level marker constructor in Leaflet.
-// https://www.mapbox.com/mapbox.js/api/v3.0.1/l-control-scale/
+L.marker([47.47, 19.06], {
-L.control.scale().addTo(map);
+    icon: L.mapbox.marker.icon({
-</script>
+        'marker-size': 'large',
+        'marker-symbol': 'roadblock',
+        'marker-color': '#fa0'
+    })
+}).addTo(map);
+L.marker([47.4725, 19.0625], {
+    icon: L.mapbox.marker.icon({
+        'marker-size': 'large',
+        'marker-symbol': 'college',
+        'marker-color': '64BA49'
+    })
+}).addTo(map);
+</script>
 </body>
 </html>
 </syntaxhighlight>
-==== Töltésjelző megjelenítése ====
+==== Jelölő koordinátáinak megjelenítése ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/show_loading_screen.html Show loading screen]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/display_latitude_and_longitude_on_marker_movement.html Display latitude and longitude on marker movement]
 <syntaxhighlight lang="html5">
-<!-- Show loading screen -->
+<!-- Display latitude and longitude on marker movement -->
-<!-- Use events to show when features are loading and loaded by displaying and hiding a loading message -->
+<!-- Drag the marker to a new location on a map to view it's coordinates. -->
 <!DOCTYPE html>
@@ 419. sor: / 475. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Show loading screen</title>
+<title>Display latitude and longitude on marker movement</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
 <style>
-	body { margin:0; padding:0; }
+  body { margin:0; padding:0; }
-	#map { position:absolute; top:0; bottom:0; width:100%; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 <script>
@@ 433. sor: / 489. sor: @@
 <body>
 <style>
+pre.ui-coordinates {
+  position:absolute;
+  bottom:10px;
+  left:10px;
+  padding:5px 10px;
+  background:rgba(0,0,0,0.5);
+  color:#fff;
+  font-size:11px;
+  line-height:18px;
+  border-radius:3px;
+  }
+</style>
+<div id='map'></div>
+<pre id='coordinates' class='ui-coordinates'></pre>
+<script>
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+var map = L.mapbox.map('map', 'mapbox.streets')
+    .setView([0, 0], 3);
-/*
+var coordinates = document.getElementById('coordinates');
- * This is a very simple version of a 'loading screen': there are much
- * fancier ones you can use instead, like
- * http://codepen.io/collection/HtAne/
- */
-#loader {
-    position:absolute; top:0; bottom:0; width:100%;
-    background:rgba(255, 255, 255, 1);
-    transition:background 1s ease-out;
-    -webkit-transition:background 1s ease-out;
-}
-#loader.done {
-    background:rgba(255, 255, 255, 0);
-}
-#loader.hide {
-    display:none;
-}
-#loader .message {
-    position:absolute;
-    left:50%;
-    top:50%;
-}
-</style>
-<div id='map'></div>
-<div id='loader'><span class='message'>loading</span></div>
-<script>
-L.mapbox.accessToken = '<your access token here>';
-L.mapbox.accessToken = demoAccessToken;
-var loader = document.getElementById('loader');
-var map = L.mapbox.map('map')
-    .setView([47.47, 19.06], 13);
-// Add a tile layer with a loading animation
+var marker = L.marker([0, 0], {
+    icon: L.mapbox.marker.icon({
+      'marker-color': '#f86767'
+    }),
+    draggable: true
+}).addTo(map);
-// start the loading screen
+// every time the marker is dragged, update the coordinates container
-startLoading();
+marker.on('dragend', ondragend);
-L.mapbox.tileLayer('mapbox.streets')
-    .addTo(map) // add your tiles to the map
-    .on('load', finishedLoading); // when the tiles load, remove the screen
-function startLoading() {
+// Set the initial marker coordinate on load.
-    loader.className = '';
+ondragend();
-}
-function finishedLoading() {
+function ondragend() {
-     // first, toggle the class 'done', which makes the loading screen
+     var m = marker.getLatLng();
-    // fade out
+     coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
-     loader.className = 'done';
-    setTimeout(function() {
-        // then, after a half-second, add the class 'hide', which hides
-        // it completely and ensures that the user can interact with the
-        // map again.
-        loader.className = 'hide';
-    }, 500);
 }
 </script>
@@ 495. sor: / 533. sor: @@
 </syntaxhighlight>
-=== Jelölők a térképen ===
+==== Jelölőtől való távolság ====
-==== Egyszerű jelölő ikonnal ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/distance_between_two_markers.html Distance between two markers]
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_without_geojson.html Marker without GeoJSON]
 <syntaxhighlight lang="html5">
-<!-- Marker without GeoJSON -->
+<!-- Distance between two markers -->
-<!-- Use L.mapbox.marker.icon to create a simple marker without GeoJSON. -->
+<!-- Calculate the distance between two points in meters using distanceTo. -->
-<!-- Icon examples: https://www.mapbox.com/maki-icons/ -->
 <!DOCTYPE html>
@@ 510. sor: / 545. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Marker without GeoJSON</title>
+<title>Distance between two markers</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 523. sor: / 558. sor: @@
 </head>
 <body>
+<style>
+pre.ui-distance {
+  position:absolute;
+  bottom:10px;
+  left:10px;
+  padding:5px 10px;
+  background:rgba(0,0,0,0.5);
+  color:#fff;
+  font-size:11px;
+  line-height:18px;
+  border-radius:3px;
+  }
+</style>
 <div id='map'></div>
+<pre id='distance' class='ui-distance'>Click to place a marker</pre>
 <script>
@@ 529. sor: / 578. sor: @@
 L.mapbox.accessToken = demoAccessToken;
 var map = L.mapbox.map('map', 'mapbox.streets')
-     .setView([47.47, 19.06], 16);
+     .setView([47.47, 19.06], 15);
-// L.marker is a low-level marker constructor in Leaflet.
+// Start with a fixed marker.
-L.marker([47.47, 19.06], {
+var fixedMarker = L.marker(new L.LatLng(47.4725, 19.0625), {
      icon: L.mapbox.marker.icon({
-        'marker-size': 'large',
+         'marker-color': 'ff8888'
-        'marker-symbol': 'roadblock',
+     })
-         'marker-color': '#fa0'
+}).bindPopup('ELTE Déli tömb').addTo(map);
-     })
-}).addTo(map);
-L.marker([47.4725, 19.0625], {
-    icon: L.mapbox.marker.icon({
-        'marker-size': 'large',
-        'marker-symbol': 'college',
-        'marker-color': '64BA49'
-    })
-}).addTo(map);
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Jelölő koordinátáinak megjelenítése ====
+// Store the fixedMarker coordinates in a variable.
+var fc = fixedMarker.getLatLng();
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/display_latitude_and_longitude_on_marker_movement.html Display latitude and longitude on marker movement]
+// Create a featureLayer that will hold a marker and linestring.
+var featureLayer = L.mapbox.featureLayer().addTo(map);
-<syntaxhighlight lang="html5">
+// When a user clicks on the map we want to
-<!-- Display latitude and longitude on marker movement -->
+// create a new L.featureGroup that will contain a
-<!-- Drag the marker to a new location on a map to view it's coordinates. -->
+// marker placed where the user selected the map and
+// a linestring that draws itself between the fixedMarkers
+// coordinates and the newly placed marker.
+map.on('click', function(ev) {
+    // ev.latlng gives us the coordinates of
+    // the spot clicked on the map.
+    var c = ev.latlng;
-<!DOCTYPE html>
+    var geojson = {
-<html>
+      type: 'FeatureCollection',
-<head>
+      features: [
-<meta charset=utf-8 />
+        {
-<title>Display latitude and longitude on marker movement</title>
+          "type": "Feature",
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+          "geometry": {
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
+            "type": "Point",
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
+            "coordinates": [c.lng, c.lat]
-<style>
+          },
-  body { margin:0; padding:0; }
+          "properties": {
-  #map { position:absolute; top:0; bottom:0; width:100%; }
+            "marker-color": "#ff8888"
-</style>
+          }
-<script>
+        }, {
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+          "type": "Feature",
+          "geometry": {
+            "type": "LineString",
+            "coordinates": [
+              [fc.lng, fc.lat],
+              [c.lng, c.lat]
+            ]
+          },
+          "properties": {
+            "stroke": "#000",
+            "stroke-opacity": 0.5,
+            "stroke-width": 4
+          }
+        }
+      ]
+    };
+    featureLayer.setGeoJSON(geojson);
+    // Finally, print the distance between these two points
+    // on the screen using distanceTo().
+    var container = document.getElementById('distance');
+    container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm';
+});
 </script>
-</head>
+</body>
-<body>
+</html>
-<style>
+</syntaxhighlight>
-pre.ui-coordinates {
-  position:absolute;
+==== Navigáció jelölőket tartalmazó menüvel ====
-  bottom:10px;
-  left:10px;
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_navigation_from_a_marker_menu.html Marker navigation from a marker menu]
-  padding:5px 10px;
-  background:rgba(0,0,0,0.5);
-  color:#fff;
-  font-size:11px;
-  line-height:18px;
-  border-radius:3px;
-  }
-</style>
-<div id='map'></div>
-<pre id='coordinates' class='ui-coordinates'></pre>
-<script>
-L.mapbox.accessToken = '<your access token here>';
-L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets')
-    .setView([0, 0], 3);
-var coordinates = document.getElementById('coordinates');
+<syntaxhighlight lang="html5">
-var marker = L.marker([0, 0], {
+<!-- Marker navigation from a marker menu -->
-    icon: L.mapbox.marker.icon({
+<!-- Zoom to a marker and open its tooltip when a marker menu in a list is selected. -->
-      'marker-color': '#f86767'
+<!DOCTYPE html>
-    }),
+<html>
-    draggable: true
+<head>
-}).addTo(map);
+<meta charset=utf-8 />
+<title>Marker navigation from a marker menu</title>
-// every time the marker is dragged, update the coordinates container
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-marker.on('dragend', ondragend);
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-// Set the initial marker coordinate on load.
+<style>
-ondragend();
+   body { margin:0; padding:0; }
+   #map { position:absolute; top:0; bottom:0; width:100%; }
-function ondragend() {
+</style>
-    var m = marker.getLatLng();
+<script>
-    coordinates.innerHTML = 'Latitude: ' + m.lat + '<br />Longitude: ' + m.lng;
-}
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Jelölőtől való távolság ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/distance_between_two_markers.html Distance between two markers]
-<syntaxhighlight lang="html5">
-<!-- Distance between two markers -->
-<!-- Calculate the distance between two points in meters using distanceTo. -->
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset=utf-8 />
-<title>Distance between two markers</title>
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-<style>
-   body { margin:0; padding:0; }
-   #map { position:absolute; top:0; bottom:0; width:100%; }
-</style>
-<script>
 var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
 </script>
@@ 647. sor: / 671. sor: @@
 <body>
 <style>
-pre.ui-distance {
+  .info {
-  position:absolute;
+    background:#fff;
-  bottom:10px;
+    position:absolute;
-  left:10px;
+    width:260px;
-  padding:5px 10px;
+    top:10px;
-  background:rgba(0,0,0,0.5);
+    right:10px;
-  color:#fff;
+    border-radius:2px;
-  font-size:11px;
+    }
-  line-height:18px;
+    .info .item {
-  border-radius:3px;
+      display:block;
-  }
+      border-bottom:1px solid #eee;
+      padding:10px;
+      text-decoration:none;
+      }
+      .info .item small { color:#888; }
+      .info .item:hover,
+      .info .item.active { background:#f8f8f8; }
+      .info .item:last-child { border-bottom:none; }
 </style>
-<div id='map'></div>
-<pre id='distance' class='ui-distance'>Click to place a marker</pre>
+<div id='map' class='map'></div>
+<div id='info' class='info'></div>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets')
+var map = L.mapbox.map('map', 'mapbox.streets').setView([47.47, 19.06], 15);
-    .setView([47.47, 19.06], 15);
-// Start with a fixed marker.
+var myLayer = L.mapbox.featureLayer().addTo(map);
-var fixedMarker = L.marker(new L.LatLng(47.4725, 19.0625), {
-    icon: L.mapbox.marker.icon({
-        'marker-color': 'ff8888'
-    })
-}).bindPopup('ELTE Déli tömb').addTo(map);
-// Store the fixedMarker coordinates in a variable.
+myLayer.setGeoJSON({
-var fc = fixedMarker.getLatLng();
+  type: 'FeatureCollection',
+  features: [
-// Create a featureLayer that will hold a marker and linestring.
+    {
-var featureLayer = L.mapbox.featureLayer().addTo(map);
+      type: 'Feature',
+      geometry: {
-// When a user clicks on the map we want to
+          type: 'Point',
-// create a new L.featureGroup that will contain a
+          coordinates: [19.0625, 47.4725]
-// marker placed where the user selected the map and
+      },
-// a linestring that draws itself between the fixedMarkers
+      properties: {
-// coordinates and the newly placed marker.
+          title: 'ELTE Déli tömb',
-map.on('click', function(ev) {
+          description: 'ELTE IK',
-    // ev.latlng gives us the coordinates of
+          'marker-id': 'marker-1',
-    // the spot clicked on the map.
+          'marker-color': '#f86767'
-    var c = ev.latlng;
+       }
+    },
-    var geojson = {
+    {
-      type: 'FeatureCollection',
+           type: 'Feature',
-       features: [
+           geometry: {
-        {
+              type: 'Point',
-           "type": "Feature",
+              coordinates: [19.0625, 47.4745]
-           "geometry": {
+           },
-            "type": "Point",
+           properties: {
-            "coordinates": [c.lng, c.lat]
+              title: 'ELTE Északi tömb',
-           },
+              description: 'ELTE TTK',
-           "properties": {
+              'marker-id': 'marker-2',
-            "marker-color": "#ff8888"
+              'marker-color': '#f86767'
            }
-        }, {
+      },
-          "type": "Feature",
+		{
-          "geometry": {
+		  type: 'Feature',
-            "type": "LineString",
+		  geometry: {
-            "coordinates": [
+			  type: 'Point',
-              [fc.lng, fc.lat],
+			  coordinates: [19.063425, 47.505258]
-              [c.lng, c.lat]
+		  },
-            ]
+		  properties: {
-          },
+			  title: 'Oktogon',
-          "properties": {
+			  description: 'Oktogon metró állomás',
-            "stroke": "#000",
+			  'marker-id': 'marker-2',
-            "stroke-opacity": 0.5,
+			  'marker-color': '#f86767',
-            "stroke-width": 4
+			  'marker-symbol': 'rail-metro'
-          }
+		  }
-        }
+		}
-      ]
+  ]
-    };
-    featureLayer.setGeoJSON(geojson);
-    // Finally, print the distance between these two points
-    // on the screen using distanceTo().
-    var container = document.getElementById('distance');
-    container.innerHTML = (fc.distanceTo(c)).toFixed(0) + 'm';
 });
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Navigáció jelölőket tartalmazó menüvel ====
+var info = document.getElementById('info');
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_navigation_from_a_marker_menu.html Marker navigation from a marker menu]
+// Iterate through each feature layer item, build a
+// marker menu item and enable a click event that pans to + opens
+// a marker that's associated to the marker item.
+myLayer.eachLayer(function(marker) {
+  var link = info.appendChild(document.createElement('a'));
+  link.className = 'item';
+  link.href = '#';
-<syntaxhighlight lang="html5">
+  // Populate content from each markers object.
+  link.innerHTML = marker.feature.properties.title +
+    '<br /><small>' + marker.feature.properties.description + '</small>';
+  link.onclick = function() {
+    if (/active/.test(this.className)) {
+      this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
+    } else {
+      var siblings = info.getElementsByTagName('a');
+      for (var i = 0; i < siblings.length; i++) {
+        siblings[i].className = siblings[i].className
+          .replace(/active/, '').replace(/\s\s*$/, '');
+      };
+      this.className += ' active';
-<!-- Marker navigation from a marker menu -->
+      // When a menu item is clicked, animate the map to center
-<!-- Zoom to a marker and open its tooltip when a marker menu in a list is selected. -->
+      // its associated marker and open its popup.
-<!DOCTYPE html>
+      map.panTo(marker.getLatLng());
-<html>
+      marker.openPopup();
+    }
+    return false;
+  };
+});
+</script>
+</body>
+</html>
+</syntaxhighlight>
+==== Csak a környező jelölők megjelenítése ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_radius_search.html Marker radius search]
+<syntaxhighlight lang="html5">
+<!-- Marker radius search -->
+<!-- Use the .distanceTo function to only show markers within a range -->
+<!DOCTYPE html>
+<html>
 <head>
 <meta charset=utf-8 />
-<title>Marker navigation from a marker menu</title>
+<title>Marker radius search</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 758. sor: / 809. sor: @@
 </head>
 <body>
-<style>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
-  .info {
+<div id='map'></div>
-    background:#fff;
-    position:absolute;
+<script>
-    width:260px;
-    top:10px;
-    right:10px;
-    border-radius:2px;
-    }
-    .info .item {
-      display:block;
-      border-bottom:1px solid #eee;
-      padding:10px;
-      text-decoration:none;
-      }
-      .info .item small { color:#888; }
-      .info .item:hover,
-      .info .item.active { background:#f8f8f8; }
-      .info .item:last-child { border-bottom:none; }
-</style>
-<div id='map' class='map'></div>
-<div id='info' class='info'></div>
-<script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets').setView([47.47, 19.06], 15);
+var map = L.mapbox.map('map', 'mapbox.emerald')
+    .setView([40, -95], 4);
-var myLayer = L.mapbox.featureLayer().addTo(map);
+var RADIUS = 500000;
+var filterCircle = L.circle(L.latLng(40, -75), RADIUS, {
-myLayer.setGeoJSON({
+    opacity: 1,
-  type: 'FeatureCollection',
+    weight: 1,
-  features: [
+    fillOpacity: 0.4
-    {
+}).addTo(map);
-      type: 'Feature',
-      geometry: {
+var csvLayer = omnivore.csv('./data/airports.csv', null, L.mapbox.featureLayer())
-          type: 'Point',
+    .addTo(map);
-          coordinates: [19.0625, 47.4725]
-      },
+map.on('mousemove', function(e) {
-      properties: {
+    filterCircle.setLatLng(e.latlng);
-          title: 'ELTE Déli tömb',
+    csvLayer.setFilter(function showAirport(feature) {
-          description: 'ELTE IK',
+        return e.latlng.distanceTo(L.latLng(
-          'marker-id': 'marker-1',
+                feature.geometry.coordinates[1],
-          'marker-color': '#f86767'
+                feature.geometry.coordinates[0])) < RADIUS;
-      }
+    });
-    },
+});
-    {
+</script>
-          type: 'Feature',
+</body>
-          geometry: {
+</html>
-              type: 'Point',
+</syntaxhighlight>
-              coordinates: [19.0625, 47.4745]
-          },
+==== Jelölő mozgatása programozottan ====
-          properties: {
-              title: 'ELTE Északi tömb',
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_movement.html Marker movement]
-              description: 'ELTE TTK',
-              'marker-id': 'marker-2',
+<syntaxhighlight lang="html5">
-              'marker-color': '#f86767'
+<!-- Marker movement -->
-          }
+<!-- Simple marker animation. -->
-      },
-		{
+<!DOCTYPE html>
-		  type: 'Feature',
+<html>
-		  geometry: {
+<head>
-			  type: 'Point',
+<meta charset=utf-8 />
-			  coordinates: [19.063425, 47.505258]
+<title>Marker movement</title>
-		  },
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-		  properties: {
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-			  title: 'Oktogon',
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-			  description: 'Oktogon metró állomás',
+<style>
-			  'marker-id': 'marker-2',
+  body { margin:0; padding:0; }
-			  'marker-color': '#f86767',
+  #map { position:absolute; top:0; bottom:0; width:100%; }
-			  'marker-symbol': 'rail-metro'
+</style>
-		  }
+<script>
-		}
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-  ]
+</script>
-});
+</head>
+<body>
+<div id='map'></div>
-var info = document.getElementById('info');
+<script>
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+var map = L.mapbox.map('map', 'mapbox.light')
+  .setView([0, 0], 3);
-// Iterate through each feature layer item, build a
+var marker = L.marker([0, 0], {
-// marker menu item and enable a click event that pans to + opens
+    icon: L.mapbox.marker.icon({
-// a marker that's associated to the marker item.
+      'marker-color': '#f86767'
-myLayer.eachLayer(function(marker) {
+    })
-  var link = info.appendChild(document.createElement('a'));
+});
-  link.className = 'item';
-  link.href = '#';
-  // Populate content from each markers object.
+var t = 0;
-  link.innerHTML = marker.feature.properties.title +
+window.setInterval(function() {
-    '<br /><small>' + marker.feature.properties.description + '</small>';
+     // Making a lissajous curve just for fun.
-  link.onclick = function() {
+    // Create your own animated path here.
-     if (/active/.test(this.className)) {
+    marker.setLatLng(L.latLng(
-      this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
+        Math.cos(t * 0.5) * 10,
-    } else {
+        Math.sin(t) * 10));
-      var siblings = info.getElementsByTagName('a');
+    t += 0.01; // Movement
-      for (var i = 0; i < siblings.length; i++) {
+}, 1); // Speed
-        siblings[i].className = siblings[i].className
-          .replace(/active/, '').replace(/\s\s*$/, '');
-      };
-      this.className += ' active';
-      // When a menu item is clicked, animate the map to center
+marker.addTo(map);
-      // its associated marker and open its popup.
-      map.panTo(marker.getLatLng());
-      marker.openPopup();
-    }
-    return false;
-  };
-});
 </script>
 </body>
@@ 872. sor: / 896. sor: @@
 </syntaxhighlight>
-==== Csak a környező jelölők megjelenítése ====
+==== Jelölő animálása geoJson vonalon ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_radius_search.html Marker radius search]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/animate_a_marker_along_line.html Animate a marker along line]
 <syntaxhighlight lang="html5">
-<!-- Marker radius search -->
+<!-- Animate a marker along line -->
-<!-- Use the .distanceTo function to only show markers within a range -->
+<!-- Create a marker and animate its position along the length of a line by looking up its coordinates. -->
 <!DOCTYPE html>
@@ 884. sor: / 908. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Marker radius search</title>
+<title>Animate a marker along line</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 897. sor: / 921. sor: @@
 </head>
 <body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>
 <div id='map'></div>
@@ 903. sor: / 926. sor: @@
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.emerald')
+var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 3);
-    .setView([40, -95], 4);
-var RADIUS = 500000;
+// Generate a GeoJSON line. You could also load GeoJSON via AJAX
-var filterCircle = L.circle(L.latLng(40, -75), RADIUS, {
+// or generate it some other way.
-    opacity: 1,
+var geojson = { type: 'LineString', coordinates: [] };
-    weight: 1,
+var start = [0, 0];
-    fillOpacity: 0.4
+var momentum = [2, 2];
-}).addTo(map);
-var csvLayer = omnivore.csv('./data/airports.csv', null, L.mapbox.featureLayer())
+for (var i = 0; i < 1000; i++) {
-     .addTo(map);
+    start[0] += momentum[0];
+    start[1] += momentum[1];
+    if (start[1] > 30 || start[1] < -30) momentum[1] *= -1;
+    if (start[0] > 90 || start[0] < -90) momentum[0] *= -1;
+     geojson.coordinates.push(start.slice());
+}
-map.on('mousemove', function(e) {
+// Add this generated geojson object to the map.
-    filterCircle.setLatLng(e.latlng);
+L.geoJson(geojson).addTo(map);
-    csvLayer.setFilter(function showAirport(feature) {
-        return e.latlng.distanceTo(L.latLng(
-                feature.geometry.coordinates[1],
-                feature.geometry.coordinates[0])) < RADIUS;
-    });
-});
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Jelölő mozgatása programozottan ====
+// Create a counter with a value of 0.
+var j = 0;
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/marker_movement.html Marker movement]
+// Create a marker and add it to the map.
+var marker = L.marker([0, 0], {
+  icon: L.mapbox.marker.icon({
+    'marker-color': '#f86767'
+  })
+}).addTo(map);
-<syntaxhighlight lang="html5">
+tick();
-<!-- Marker movement -->
+function tick() {
-<!-- Simple marker animation. -->
+    // Set the marker to be at the same point as one
+    // of the segments or the line.
+    marker.setLatLng(L.latLng(
+        geojson.coordinates[j][1],
+        geojson.coordinates[j][0]));
+    // Move to the next point of the line
+    // until `j` reaches the length of the array.
+    if (++j < geojson.coordinates.length) setTimeout(tick, 20);
+}
+</script>
+</body>
+</html>
+</syntaxhighlight>
+=== Tippek, üzenetek, szövegek ===
+==== Egyedi jelölő tipp ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/custom_marker_tooltips.html Custom marker tooltips]
+<syntaxhighlight lang="html5">
+<!-- Custom marker tooltips -->
+<!-- How to create a custom marker tooltip with style text or images using Mapbox.js, our open source JavaScript library. -->
 <!DOCTYPE html>
@@ 941. sor: / 986. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Marker movement</title>
+<title>Custom marker tooltips</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 954. sor: / 999. sor: @@
 </head>
 <body>
-<div id='map'></div>
+<style>
+.leaflet-popup-content img {
+  max-width:100%;
+  }
+</style>
+<div id='map'></div>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.light')
+var map = L.mapbox.map('map', 'mapbox.streets')
-  .setView([0, 0], 3);
+    .setView([47.47, 19.06], 15);
-var marker = L.marker([0, 0], {
+var myLayer = L.mapbox.featureLayer().addTo(map);
-    icon: L.mapbox.marker.icon({
-      'marker-color': '#f86767'
-    })
-});
-var t = 0;
+var geoJson = [{
-window.setInterval(function() {
+    type: 'Feature',
-    // Making a lissajous curve just for fun.
+    "geometry": { "type": "Point", "coordinates": [19.06, 47.47]},
-    // Create your own animated path here.
+    "properties": {
-     marker.setLatLng(L.latLng(
+        "image": "http://hazai.kozep.bme.hu/wp-content/uploads/2013/06/00-Info-E-nyit%C3%B3.jpg",
-        Math.cos(t * 0.5) * 10,
+        "url": "http://www.infopark.hu/",
-        Math.sin(t) * 10));
+        "marker-symbol": "star",
-    t += 0.01; // Movement
+        "marker-color": "#ff8888",
-}, 1); // Speed
+        "marker-size": "large",
+        "city": "Budapest - Infopark"
+     }
+	},
+	{
+		type: 'Feature',
+		"geometry": { "type": "Point", "coordinates": [19.063, 47.473]},
+		"properties": {
+			"image": "http://photos.wikimapia.org/p/00/02/45/33/03_big.jpg",
+			"url": "https://www.elte.hu/",
+			"marker-symbol": "star",
+			"marker-color": "#ff8888",
+			"marker-size": "large",
+			"city": "Budapest - ELTE Lágymányos"
+		}
+}];
-marker.addTo(map);
+// Add custom popups to each using our custom feature properties
-</script>
+myLayer.on('layeradd', function(e) {
-</body>
+    var marker = e.layer,
-</html>
+        feature = marker.feature;
-</syntaxhighlight>
-==== Jelölő animálása geoJson vonalon ====
+    // Create custom popup content
+    var popupContent =  '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
+                            '<img src="' + feature.properties.image + '" />' +
+                            feature.properties.city +
+                        '</a>';
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/animate_a_marker_along_line.html Animate a marker along line]
+    // http://leafletjs.com/reference.html#popup
+    marker.bindPopup(popupContent,{
+        closeButton: false,
+        minWidth: 480
+    });
+});
+// Add features to the map
+myLayer.setGeoJSON(geoJson);
+</script>
+</body>
+</html>
+</syntaxhighlight>
+==== Jelölőhöz tartozó tipp megjelenítése egérrel ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/show_tooltips_on_hover.html Show tooltips on hover]
 <syntaxhighlight lang="html5">
-<!-- Animate a marker along line -->
+<!-- Show tooltips on hover -->
-<!-- Create a marker and animate its position along the length of a line by looking up its coordinates. -->
+<!-- How to show marker popups on hover with Mapbox.js, our open source JavaScript library. -->
 <!DOCTYPE html>
@@ 996. sor: / 1 076. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Animate a marker along line</title>
+<title>Show tooltips on hover</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 014. sor: / 1 094. sor: @@
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 3);
+var map = L.mapbox.map('map', 'mapbox.light')
+  .setView([47.47, 19.06], 15);
-// Generate a GeoJSON line. You could also load GeoJSON via AJAX
+var myLayer = L.mapbox.featureLayer().addTo(map);
-// or generate it some other way.
-var geojson = { type: 'LineString', coordinates: [] };
-var start = [0, 0];
-var momentum = [2, 2];
-for (var i = 0; i < 1000; i++) {
+var geojson = {
-     start[0] += momentum[0];
+     type: 'FeatureCollection',
-     start[1] += momentum[1];
+    features: [{
-     if (start[1] > 30 || start[1] < -30) momentum[1] *= -1;
+        type: 'Feature',
-    if (start[0] > 90 || start[0] < -90) momentum[0] *= -1;
+        properties: {
-    geojson.coordinates.push(start.slice());
+            title: 'Bal alsó',
-}
+            'marker-color': '#f86767',
+            'marker-size': 'small',
-// Add this generated geojson object to the map.
+            'marker-symbol': 'star'
-L.geoJson(geojson).addTo(map);
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: [19.05, 47.46]
+        }
+     },
+     {
+        type: 'Feature',
+        properties: {
+            title: 'Jobb felső',
+            'marker-color': '#7ec9b1',
+            'marker-size': 'large',
+            'marker-symbol': 'star'
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: [19.07, 47.48]
+        }
+    }]
+};
-// Create a counter with a value of 0.
+myLayer.setGeoJSON(geojson);
-var j = 0;
+myLayer.on('mouseover', function(e) {
+    e.layer.openPopup();
-// Create a marker and add it to the map.
+});
-var marker = L.marker([0, 0], {
+myLayer.on('mouseout', function(e) {
-  icon: L.mapbox.marker.icon({
+     e.layer.closePopup();
-    'marker-color': '#f86767'
+});
-  })
-}).addTo(map);
-tick();
-function tick() {
-     // Set the marker to be at the same point as one
-    // of the segments or the line.
-    marker.setLatLng(L.latLng(
-        geojson.coordinates[j][1],
-        geojson.coordinates[j][0]));
-    // Move to the next point of the line
-    // until `j` reaches the length of the array.
-    if (++j < geojson.coordinates.length) setTimeout(tick, 20);
-}
 </script>
 </body>
@@ 1 060. sor: / 1 141. sor: @@
 </syntaxhighlight>
-=== Tippek, üzenetek, szövegek ===
+=== Helyek ===
-==== Egyedi jelölő tipp ====
+==== Hely keresése automatikus kiegészítéssel ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/custom_marker_tooltips.html Custom marker tooltips]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/geocoding_with_autocomplete.html Geocoding with autocomplete]
 <syntaxhighlight lang="html5">
-<!-- Custom marker tooltips -->
+<!-- Geocoding with autocomplete -->
-<!-- How to create a custom marker tooltip with style text or images using Mapbox.js, our open source JavaScript library. -->
+<!-- Using the Mapbox Geocoding API to show real-time search suggestions. -->
 <!DOCTYPE html>
@@ 1 074. sor: / 1 155. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Custom marker tooltips</title>
+<title>Geocoding with autocomplete</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 087. sor: / 1 168. sor: @@
 </head>
 <body>
-<style>
-.leaflet-popup-content img {
-  max-width:100%;
-  }
-</style>
 <div id='map'></div>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets')
+L.mapbox.map('map', 'mapbox.streets')
-     .setView([47.47, 19.06], 15);
+     .addControl(L.mapbox.geocoderControl('mapbox.places', {
+        autocomplete: true
+    }));
+</script>
+</body>
+</html>
+</syntaxhighlight>
+==== Hely lekérdezése név alapján (Geocoderrel) ====
-var myLayer = L.mapbox.featureLayer().addTo(map);
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/use_geocoder_to_set_map_position.html Use geocoder to set map position]
-var geoJson = [{
+<syntaxhighlight lang="html5">
-    type: 'Feature',
+<!-- Use geocoder to set map position -->
-    "geometry": { "type": "Point", "coordinates": [19.06, 47.47]},
+<!-- Using the Mapbox Geocoding API initially set map position on Chester, New Jersey. -->
-    "properties": {
-        "image": "http://hazai.kozep.bme.hu/wp-content/uploads/2013/06/00-Info-E-nyit%C3%B3.jpg",
-        "url": "http://www.infopark.hu/",
-        "marker-symbol": "star",
-        "marker-color": "#ff8888",
-        "marker-size": "large",
-        "city": "Budapest - Infopark"
-    }
-	},
-	{
-		type: 'Feature',
-		"geometry": { "type": "Point", "coordinates": [19.063, 47.473]},
-		"properties": {
-			"image": "http://photos.wikimapia.org/p/00/02/45/33/03_big.jpg",
-			"url": "https://www.elte.hu/",
-			"marker-symbol": "star",
-			"marker-color": "#ff8888",
-			"marker-size": "large",
-			"city": "Budapest - ELTE Lágymányos"
-		}
-}];
-// Add custom popups to each using our custom feature properties
+<!DOCTYPE html>
-myLayer.on('layeradd', function(e) {
+<html>
-    var marker = e.layer,
+<head>
-        feature = marker.feature;
+<meta charset=utf-8 />
+<title>Use geocoder to set map position</title>
-    // Create custom popup content
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    var popupContent =  '<a target="_blank" class="popup" href="' + feature.properties.url + '">' +
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-                            '<img src="' + feature.properties.image + '" />' +
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-                            feature.properties.city +
+<style>
-                        '</a>';
+  body { margin:0; padding:0; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+<script>
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+</script>
+</head>
+<body>
+<div id='map'></div>
+<script>
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+var geocoder = L.mapbox.geocoder('mapbox.places'),
+    map = L.mapbox.map('map', 'examples.map-h67hf2ic');
-    // http://leafletjs.com/reference.html#popup
+geocoder.query('Tab, HU', showMap);
-    marker.bindPopup(popupContent,{
-        closeButton: false,
-        minWidth: 480
-    });
-});
-// Add features to the map
+function showMap(err, data) {
-myLayer.setGeoJSON(geoJson);
+    // The geocoder can return an area, like a city, or a
+    // point, like an address. Here we handle both cases,
+    // by fitting the map bounds to an area or zooming to a point.
+    if (data.lbounds) {
+        map.fitBounds(data.lbounds);
+    } else if (data.latlng) {
+        map.setView([data.latlng[0], data.latlng[1]], 13);
+    }
+}
 </script>
 </body>
@@ 1 152. sor: / 1 230. sor: @@
 </syntaxhighlight>
-==== Jelölőhöz tartozó tipp megjelenítése egérrel ====
+==== Aktuális pozíció megjelenítése (megközelítőleg) ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/geolocation.html Geolocation]
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/show_tooltips_on_hover.html Show tooltips on hover]
+FONTOS: A Geolocation, azaz helymeghatározás használatához valid HTTPS kapcsolat szükséges.
 <syntaxhighlight lang="html5">
-<!-- Show tooltips on hover -->
+<!-- Geolocation -->
-<!-- How to show marker popups on hover with Mapbox.js, our open source JavaScript library. -->
+<!-- Finding the user's position -->
 <!DOCTYPE html>
@@ 1 164. sor: / 1 244. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Show tooltips on hover</title>
+<title>Geolocation</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 177. sor: / 1 257. sor: @@
 </head>
 <body>
-<div id='map'></div>
+<style>
+.ui-button {
+  background:#3887BE;
+  color:#FFF;
+  display:block;
+  position:absolute;
+  top:50%;left:50%;
+  width:160px;
+  margin:-20px 0 0 -80px;
+  z-index:100;
+  text-align:center;
+  padding:10px;
+  border:1px solid rgba(0,0,0,0.4);
+  border-radius:3px;
+  }
+  .ui-button:hover {
+    background:#3074a4;
+    color:#fff;
+    }
+</style>
+<div id='map'></div>
+<a href='#' id='geolocate' class='ui-button'>Find me</a>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.light')
+var geolocate = document.getElementById('geolocate');
-  .setView([47.47, 19.06], 15);
+var map = L.mapbox.map('map', 'mapbox.streets');
 var myLayer = L.mapbox.featureLayer().addTo(map);
-var geojson = {
+// This uses the HTML5 geolocation API, which is available on
-     type: 'FeatureCollection',
+// most mobile browsers and modern browsers, but not in Internet Explorer
-     features: [{
+//
+// See this chart of compatibility for details:
+// http://caniuse.com/#feat=geolocation
+if (!navigator.geolocation) {
+     geolocate.innerHTML = 'Geolocation is not available';
+} else {
+    geolocate.onclick = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        map.locate();
+    };
+}
+// Once we've got a position, zoom and center the map
+// on it, and add a single marker.
+map.on('locationfound', function(e) {
+     map.fitBounds(e.bounds);
+    myLayer.setGeoJSON({
          type: 'Feature',
-        properties: {
-            title: 'Bal alsó',
-            'marker-color': '#f86767',
-            'marker-size': 'small',
-            'marker-symbol': 'star'
-        },
          geometry: {
              type: 'Point',
-             coordinates: [19.05, 47.46]
+             coordinates: [e.latlng.lng, e.latlng.lat]
-         }
+         },
-    },
-    {
-        type: 'Feature',
          properties: {
-             title: 'Jobb felső',
+             'title': 'Here I am!',
-             'marker-color': '#7ec9b1',
+             'marker-color': '#ff8888',
-            'marker-size': 'large',
              'marker-symbol': 'star'
-        },
-        geometry: {
-            type: 'Point',
-            coordinates: [19.07, 47.48]
          }
-     }]
+     });
-};
-myLayer.setGeoJSON(geojson);
+    // And hide the geolocation button
-myLayer.on('mouseover', function(e) {
+     geolocate.parentNode.removeChild(geolocate);
-     e.layer.openPopup();
 });
-myLayer.on('mouseout', function(e) {
-     e.layer.closePopup();
+// If the user chooses not to allow their location
+// to be shared, display an error message.
+map.on('locationerror', function() {
+     geolocate.innerHTML = 'Position could not be found';
 });
 </script>
@@ 1 229. sor: / 1 336. sor: @@
 </syntaxhighlight>
-=== Helyek ===
+=== Útvonaltervezés (Autós, biciklis, gyalogos közlekedéssel) ===
-==== Hely keresése automatikus kiegészítéssel ====
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/directions.html Directions]
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/geocoding_with_autocomplete.html Geocoding with autocomplete]
 <syntaxhighlight lang="html5">
-<!-- Geocoding with autocomplete -->
+<!-- Directions -->
-<!-- Using the Mapbox Geocoding API to show real-time search suggestions. -->
+<!-- Use the mapbox-directions.js plugin to show results from the Mapbox Directions API -->
-<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
-<title>Geocoding with autocomplete</title>
+<title>Directions</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 256. sor: / 1 360. sor: @@
 </head>
 <body>
-<div id='map'></div>
+<style>
-<script>
+#inputs,
-L.mapbox.accessToken = '<your access token here>';
+#errors,
-L.mapbox.accessToken = demoAccessToken;
+#directions {
-L.mapbox.map('map', 'mapbox.streets')
+    position: absolute;
-     .addControl(L.mapbox.geocoderControl('mapbox.places', {
+    width: 33.3333%;
-        autocomplete: true
+     max-width: 300px;
-     }));
+     min-width: 200px;
-</script>
+}
-</body>
-</html>
-</syntaxhighlight>
-==== Hely lekérdezése név alapján (Geocoderrel) ====
+#inputs {
+    z-index: 10;
+    top: 10px;
+    left: 10px;
+}
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/use_geocoder_to_set_map_position.html Use geocoder to set map position]
+#directions {
+    z-index: 99;
+    background: rgba(0,0,0,.8);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+}
+#errors {
+    z-index: 8;
+    opacity: 0;
+    padding: 10px;
+    border-radius: 0 0 3px 3px;
+    background: rgba(0,0,0,.25);
+    top: 90px;
+    left: 10px;
+}
-<syntaxhighlight lang="html5">
-<!-- Use geocoder to set map position -->
-<!-- Using the Mapbox Geocoding API initially set map position on Chester, New Jersey. -->
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset=utf-8 />
-<title>Use geocoder to set map position</title>
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-<style>
-  body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
-<script>
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+<script src='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.js'></script>
-</script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.css' type='text/css' />
-</head>
-<body>
 <div id='map'></div>
-<script>
+<div id='inputs'></div>
-L.mapbox.accessToken = '<your access token here>';
+<div id='errors'></div>
+<div id='directions'>
+  <div id='routes'></div>
+  <div id='instructions'></div>
+</div>
+<script>
+L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var geocoder = L.mapbox.geocoder('mapbox.places'),
+var map = L.mapbox.map('map', 'mapbox.streets', {
-    map = L.mapbox.map('map', 'examples.map-h67hf2ic');
+    zoomControl: false
+}).setView([47.47, 19.06], 15);
+// move the attribution control out of the way
+map.attributionControl.setPosition('bottomleft');
+// create the initial directions object, from which the layer
+// and inputs will pull data.
+var directions = L.mapbox.directions();
-geocoder.query('Tab, HU', showMap);
+var directionsLayer = L.mapbox.directions.layer(directions)
+    .addTo(map);
-function showMap(err, data) {
+var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions)
-     // The geocoder can return an area, like a city, or a
+     .addTo(map);
-    // point, like an address. Here we handle both cases,
-     // by fitting the map bounds to an area or zooming to a point.
+var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions)
-    if (data.lbounds) {
+     .addTo(map);
-        map.fitBounds(data.lbounds);
-     } else if (data.latlng) {
+var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
-        map.setView([data.latlng[0], data.latlng[1]], 13);
+     .addTo(map);
-     }
-}
+var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions)
+     .addTo(map);
 </script>
 </body>
@@ 1 318. sor: / 1 440. sor: @@
 </syntaxhighlight>
-==== Aktuális pozíció megjelenítése (megközelítőleg) ====
+=== Plugin támogatás és a Mapbox ===
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/geolocation.html Geolocation]
+==== Leaflet-MiniMap ====
-FONTOS: A Geolocation, azaz helymeghatározás használatához valid HTTPS kapcsolat szükséges.
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_minimap.html Leaflet-MiniMap]
 <syntaxhighlight lang="html5">
-<!-- Geolocation -->
+<!-- Leaflet-MiniMap -->
-<!-- Finding the user's position -->
+<!-- Display a smaller navigable map using the Leaflet-MiniMap plugin. -->
 <!DOCTYPE html>
@@ 1 332. sor: / 1 454. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Geolocation</title>
+<title>Leaflet-MiniMap</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 345. sor: / 1 467. sor: @@
 </head>
 <body>
-<style>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'></script>
-.ui-button {
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />
-  background:#3887BE;
-  color:#FFF;
-  display:block;
-  position:absolute;
-  top:50%;left:50%;
-  width:160px;
-  margin:-20px 0 0 -80px;
-  z-index:100;
-  text-align:center;
-  padding:10px;
-  border:1px solid rgba(0,0,0,0.4);
-  border-radius:3px;
-  }
-  .ui-button:hover {
-    background:#3074a4;
-    color:#fff;
-    }
-</style>
 <div id='map'></div>
-<a href='#' id='geolocate' class='ui-button'>Find me</a>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
-var geolocate = document.getElementById('geolocate');
+var map = L.mapbox.map('map', 'mapbox.streets')
-var map = L.mapbox.map('map', 'mapbox.streets');
+    .on('ready', function() {
+        new L.Control.MiniMap(L.mapbox.tileLayer('mapbox.streets'))
-var myLayer = L.mapbox.featureLayer().addTo(map);
+            .addTo(map);
+    });
-// This uses the HTML5 geolocation API, which is available on
+</script>
-// most mobile browsers and modern browsers, but not in Internet Explorer
+</body>
-//
+</html>
-// See this chart of compatibility for details:
+</syntaxhighlight>
-// http://caniuse.com/#feat=geolocation
-if (!navigator.geolocation) {
+==== Leaflet Fullscreen ====
-    geolocate.innerHTML = 'Geolocation is not available';
-} else {
-    geolocate.onclick = function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        map.locate();
-    };
-}
-// Once we've got a position, zoom and center the map
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_fullscreen.html Leaflet Fullscreen]
-// on it, and add a single marker.
-map.on('locationfound', function(e) {
-    map.fitBounds(e.bounds);
-    myLayer.setGeoJSON({
+<syntaxhighlight lang="html5">
-        type: 'Feature',
+<!-- Leaflet Fullscreen -->
-        geometry: {
+<!-- Add a control to enable a map to be in full screen mode. -->
-            type: 'Point',
-            coordinates: [e.latlng.lng, e.latlng.lat]
-        },
-        properties: {
-            'title': 'Here I am!',
-            'marker-color': '#ff8888',
-            'marker-symbol': 'star'
-        }
-    });
-    // And hide the geolocation button
+<!DOCTYPE html>
-    geolocate.parentNode.removeChild(geolocate);
+<html>
-});
+<head>
+<meta charset=utf-8 />
-// If the user chooses not to allow their location
+<title>Leaflet Fullscreen</title>
-// to be shared, display an error message.
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-map.on('locationerror', function() {
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-     geolocate.innerHTML = 'Position could not be found';
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-});
+<style>
+  body { margin:0; padding:0; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+<script>
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+</script>
+</head>
+<body>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
+<div id='map'></div>
+<script>
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+var map = L.mapbox.map('map', 'mapbox.streets')
+     .setView([47.47, 19.06], 15);
+L.control.fullscreen().addTo(map);
 </script>
 </body>
@@ 1 424. sor: / 1 527. sor: @@
 </syntaxhighlight>
-=== Útvonaltervezés (Autós, biciklis, gyalogos közlekedéssel) ===
+==== Leaflet Heat ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/directions.html Directions]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_heat.html Leaflet Heat]
 <syntaxhighlight lang="html5">
-<!-- Directions -->
+<!-- Leaflet Heat -->
-<!-- Use the mapbox-directions.js plugin to show results from the Mapbox Directions API -->
+<!-- Initially draw heatmap data on a map and allow a users mouse movement to draw their own. -->
+<!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
-<title>Directions</title>
+<title>Leaflet Heat</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 448. sor: / 1 552. sor: @@
 </head>
 <body>
-<style>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-heat/v0.1.3/leaflet-heat.js'></script>
-#inputs,
+<div id='map'></div>
-#errors,
-#directions {
-    position: absolute;
-    width: 33.3333%;
-    max-width: 300px;
-    min-width: 200px;
-}
-#inputs {
+<!-- Example data. (near Hamilton, New Zealand)-->
-    z-index: 10;
+<script src='./data/realworld.388.js'></script>
-    top: 10px;
-    left: 10px;
-}
-#directions {
+<script>
-    z-index: 99;
+L.mapbox.accessToken = '<your access token here>';
-     background: rgba(0,0,0,.8);
+L.mapbox.accessToken = demoAccessToken;
-    top: 0;
+     var map = L.mapbox.map('map', 'mapbox.dark')
-    right: 0;
+        .setView([47.47, 19.06], 15);
-    bottom: 0;
-    overflow: auto;
-}
-#errors {
+     var heat = L.heatLayer(addressPoints, {maxZoom: 18}).addTo(map);
-     z-index: 8;
+     var draw = false;
-    opacity: 0;
-    padding: 10px;
-    border-radius: 0 0 3px 3px;
-    background: rgba(0,0,0,.25);
-     top: 90px;
-    left: 10px;
-}
-</style>
+    // add points on mouse move (except when interacting with the map)
+    map.on({
+        click:   function () { draw = !draw; },
+        mousemove: function (e) {
+            if (draw) {
+                heat.addLatLng(e.latlng);
+            }
+        }
+    })
+</script>
+</body>
+</html>
+</syntaxhighlight>
-<script src='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.js'></script>
+==== Leaflet Markercluster ====
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.4.0/mapbox.directions.css' type='text/css' />
-<div id='map'></div>
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_markercluster.html Leaflet Markercluster]
-<div id='inputs'></div>
-<div id='errors'></div>
-<div id='directions'>
-  <div id='routes'></div>
-  <div id='instructions'></div>
-</div>
-<script>
-L.mapbox.accessToken = '<your access token here>';
-L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets', {
-    zoomControl: false
-}).setView([47.47, 19.06], 15);
-// move the attribution control out of the way
+<syntaxhighlight lang="html5">
-map.attributionControl.setPosition('bottomleft');
+<!-- Leaflet Markercluster -->
+<!-- Using the Leaflet Markercluster plugin -->
-// create the initial directions object, from which the layer
+<!DOCTYPE html>
-// and inputs will pull data.
+<html>
-var directions = L.mapbox.directions();
+<head>
+<meta charset=utf-8 />
-var directionsLayer = L.mapbox.directions.layer(directions)
+<title>Leaflet Markercluster</title>
-    .addTo(map);
+<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
+<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
+<style>
+  body { margin:0; padding:0; }
+  #map { position:absolute; top:0; bottom:0; width:100%; }
+</style>
+<script>
+var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+</script>
+</head>
+<body>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
-var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions)
+<!-- Example data. (near Hamilton, New Zealand)-->
-    .addTo(map);
+<script src="./data/realworld.388.js"></script>
-var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions)
+<div id='map'></div>
-    .addTo(map);
-var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions)
+<script>
-     .addTo(map);
+L.mapbox.accessToken = '<your access token here>';
+L.mapbox.accessToken = demoAccessToken;
+    var map = L.mapbox.map('map', 'mapbox.streets')
+        .setView([-37.82, 175.215], 14);
+     var markers = new L.MarkerClusterGroup();
-var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions)
+    for (var i = 0; i < addressPoints.length; i++) {
-     .addTo(map);
+        var a = addressPoints[i];
+        var title = a[2];
+        var marker = L.marker(new L.LatLng(a[0], a[1]), {
+            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
+            title: title
+        });
+        marker.bindPopup(title);
+        markers.addLayer(marker);
+     }
+    map.addLayer(markers);
 </script>
 </body>
@@ 1 528. sor: / 1 640. sor: @@
 </syntaxhighlight>
-=== Plugin támogatás és a Mapbox ===
+==== Listing markers in clusters ====
-==== Leaflet-MiniMap ====
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_minimap.html Leaflet-MiniMap]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/listing_markers_in_clusters.html Listing markers in clusters]
 <syntaxhighlight lang="html5">
-<!-- Leaflet-MiniMap -->
+<!-- Listing markers in clusters -->
-<!-- Display a smaller navigable map using the Leaflet-MiniMap plugin. -->
+<!-- Show a list of clustered markers by their coordinates on a map with Mapbox.js. -->
 <!DOCTYPE html>
@@ 1 542. sor: / 1 652. sor: @@
 <head>
 <meta charset=utf-8 />
-<title>Leaflet-MiniMap</title>
+<title>Listing markers in clusters</title>
 <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
@@ 1 555. sor: / 1 665. sor: @@
 </head>
 <body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'></script>
+<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
+<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
+<style>
+pre.ui-coordinates {
+  background:rgba(0,0,0,0.5);
+  position:absolute;
+  bottom:10px;
+  left:10px;
+  padding:5px 10px;
+  color:#fff;
+  font-size:11px;
+  line-height:18px;
+  border-radius:3px;
+  max-height:240px;
+  overflow:auto;
+  width:100px;
+  }
+</style>
 <div id='map'></div>
+<pre id='coordinates' class='ui-coordinates'></pre>
+<!-- Example data. (near Hamilton, New Zealand)-->
+<script src="./data/realworld.388.js"></script>
 <script>
 L.mapbox.accessToken = '<your access token here>';
 L.mapbox.accessToken = demoAccessToken;
 var map = L.mapbox.map('map', 'mapbox.streets')
-     .on('ready', function() {
+     .setView([-37.82, 175.215], 14);;
-        new L.Control.MiniMap(L.mapbox.tileLayer('mapbox.streets'))
-            .addTo(map);
+var markers = new L.MarkerClusterGroup();
+for (var i = 0; i < addressPoints.length; i++) {
+    var a = addressPoints[i];
+    var title = a[2];
+    var marker = L.marker(new L.LatLng(a[0], a[1]), {
+        icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
+        title: title
      });
-</script>
+    marker.bindPopup(title);
-</body>
+    markers.addLayer(marker);
-</html>
+}
-</syntaxhighlight>
-==== Leaflet Fullscreen ====
+map.addLayer(markers);
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_fullscreen.html Leaflet Fullscreen]
+function onmove() {
+    // Get the map bounds - the top-left and bottom-right locations.
-<syntaxhighlight lang="html5">
+    var inBounds = [],
-<!-- Leaflet Fullscreen -->
+        bounds = map.getBounds();
-<!-- Add a control to enable a map to be in full screen mode. -->
+    markers.eachLayer(function(marker) {
+        // For each marker, consider whether it is currently visible by comparing
+        // with the current map bounds.
+        if (bounds.contains(marker.getLatLng())) {
+            inBounds.push(marker.options.title);
+        }
+    });
+    // Display a list of markers.
+    document.getElementById('coordinates').innerHTML = inBounds.join('\n');
+}
+map.on('move', onmove);
-<!DOCTYPE html>
+// call onmove off the bat so that the list is populated.
-<html>
+// otherwise, there will be no markers listed until the map is moved.
-<head>
+onmove();
-<meta charset=utf-8 />
-<title>Leaflet Fullscreen</title>
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-<style>
-  body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
-</style>
-<script>
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-</script>
-</head>
-<body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
-<div id='map'></div>
-<script>
-L.mapbox.accessToken = '<your access token here>';
-L.mapbox.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets')
-    .setView([47.47, 19.06], 15);
-L.control.fullscreen().addTo(map);
 </script>
 </body>
@@ 1 615. sor: / 1 737. sor: @@
 </syntaxhighlight>
-==== Leaflet Heat ====
+== Az újabb irányvonal: a Mapbox GL JS megvalósítása és működése a háttérben ==
-[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/leaflet_heat.html Leaflet Heat]
+Három alapvető működési egység és feladatkör különíthető el a Mapbox működésében. Ezek a következők:
+* '''térkép'''
+* '''adat'''
+* '''elemzés'''
-<syntaxhighlight lang="html5">
+=== Térkép: Mapbox GL a rendereléshez ===
-<!-- Leaflet Heat -->
-<!-- Initially draw heatmap data on a map and allow a users mouse movement to draw their own. -->
-<!DOCTYPE html>
+A térkép megjelenítését a GPU végzi '''Mapbox GL''' segítségével. A legfontosabb jellemzői:
-<html>
+* A régi raszteres adatokkal (png csempék) szemben, itt vektoros adatok (vektoros csempék) vannak.
-<head>
+* A megjelenítéskor rugalmasan kezelhetőek a stílusok (style JSON segítségével).
-<meta charset=utf-8 />
+* Kliens oldali renderelés (Open/Web GL alapon).
-<title>Leaflet Heat</title>
+* Az adatok külön rétegek a térképen, nem képezik szerves és elválaszthatatlan részét.
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-<style>
-  body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
-</style>
-<script>
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-</script>
-</head>
-<body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-heat/v0.1.3/leaflet-heat.js'></script>
-<div id='map'></div>
-<!-- Example data. (near Hamilton, New Zealand)-->
+[[Fájl:mapbox_mapboxgl_03.png|frame|center|alt=Mapbox GL|Mapbox GL]]
-<script src='./data/realworld.388.js'></script>
-<script>
+Példa:
-L.mapbox.accessToken = '<your access token here>';
+<syntaxhighlight lang="html5">
-L.mapbox.accessToken = demoAccessToken;
+var map = new mapboxgl.Map({
-    var map = L.mapbox.map('map', 'mapbox.dark')
+  container: 'map',
-        .setView([47.47, 19.06], 15);
+  center: [47.47, 19.06],
+  zoom: 15,
+  style: style_object,
+  hash: true
+});
+</syntaxhighlight>
-    var heat = L.heatLayer(addressPoints, {maxZoom: 18}).addTo(map);
+[https://www.mapbox.com/mapbox-gl-js/api Mapbox GL API dokumentáció]
-    var draw = false;
-    // add points on mouse move (except when interacting with the map)
+=== Adat: Vector Tile ===
-    map.on({
-        click:   function () { draw = !draw; },
-        mousemove: function (e) {
-            if (draw) {
-                heat.addLatLng(e.latlng);
-            }
-        }
-    })
-</script>
-</body>
-</html>
-</syntaxhighlight>
-==== Leaflet Markercluster ====
+A '''Vector Tile''' egy nyílt szabvány webes térképek adatainak kódolásához.
-[http://gis.inf.elte.hu/giswiki/uploads/leaflet_markercluster.html Leaflet Markercluster]
+[[Fájl:mapbox_vectortile_01.png|frame|center|alt=Vector Tile ábrázolása|Vector Tile ábrázolása]]
-<syntaxhighlight lang="html5">
+[[Fájl:mapbox_vectortile_02.png|frame|center|alt=Vector Tile példa|Vector Tile példa]]
-<!-- Leaflet Markercluster -->
-<!-- Using the Leaflet Markercluster plugin -->
-<!DOCTYPE html>
+=== Elemzés: Turf.js ===
-<html>
-<head>
-<meta charset=utf-8 />
-<title>Leaflet Markercluster</title>
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
-<style>
-  body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
-</style>
-<script>
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
-</script>
-</head>
-<body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
-<!-- Example data. (near Hamilton, New Zealand)-->
+A térkép adatain elvégezhetünk különféle térinformatikai műveleteket és elemzéseket. Erre a célra szolgál a '''Turj.js''' nevű nyílt forráskódú JavaScript könyvtár, melyet a Mapbox is beépítetten használ.
-<script src="./data/realworld.388.js"></script>
+Néhány ilyen térinformatikai művelet a Turf.js képességei közül:
+* Méretarány, mérték, távolságmérés kezelése
+* Transzformáció (például: buffer terület, unió, metszet és különbség képzés)
+* Pontok, poligonok és multipoligonok kezelése
+* Interpoláció
+* Adat osztályozás
+* Mértékegység konverzió
+* Rácsok, hálózatok elemzése
+* Aggregációs és statisztikai függvények
-<div id='map'></div>
+[[Fájl:mapbox_turf_03.png|frame|center|alt=Turf.js|Turf.js]]
-<script>
+Példa:
-L.mapbox.accessToken = '<your access token here>';
+<syntaxhighlight lang="html5">
-L.mapbox.accessToken = demoAccessToken;
+var poly1 = {
-    var map = L.mapbox.map('map', 'mapbox.streets')
+  "type": "Feature",
-        .setView([-37.82, 175.215], 14);
+  "properties": {
+    "fill": "#0f0"
-     var markers = new L.MarkerClusterGroup();
+  },
+  "geometry": {
-     for (var i = 0; i < addressPoints.length; i++) {
+    "type": "Polygon",
-        var a = addressPoints[i];
+    "coordinates": [[
-        var title = a[2];
+      [-82.574787, 35.594087],
-        var marker = L.marker(new L.LatLng(a[0], a[1]), {
+      [-82.574787, 35.615581],
-            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
+      [-82.545261, 35.615581],
-            title: title
+      [-82.545261, 35.594087],
-        });
+      [-82.574787, 35.594087]
-        marker.bindPopup(title);
+     ]]
-        markers.addLayer(marker);
+  }
-    }
+};
+var poly2 = {
-    map.addLayer(markers);
+  "type": "Feature",
-</script>
+  "properties": {
-</body>
+     "fill": "#00f"
-</html>
+  },
-</syntaxhighlight>
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [[
+      [-82.560024, 35.585153],
+      [-82.560024, 35.602602],
+      [-82.52964, 35.602602],
+      [-82.52964, 35.585153],
+      [-82.560024, 35.585153]
+    ]]
+  }
+};
+var union = turf.union(poly1, poly2);
+</syntaxhighlight>
-==== Listing markers in clusters ====
+[http://turfjs.org/docs Turf.js API dokumentáció]
+=== Komponensek közötti kapcsolat ===
+A Mapbox, illetve annak webes Mapbox.js nevű megoldása, ezen különálló komponensek egyfajta "wrapper" megvalósítása az egyszerűbb és egységesebb kezelhetőség érdekében.
+[[Fájl:mapbox_rendereles_01.png|frame|center|alt=Megjelenítés, renderelés|Megjelenítés, renderelés]]
+[[Fájl:mapbox_elemzes_01.png|frame|center|alt=Elemzés, szűrés|Elemzés, szűrés]]
+== Példák (Mapbox GL JS) ==
+=== Minimális példa egy térkép megjelenítésére ===
-[http://gis.inf.elte.hu/giswiki/uploads/listing_markers_in_clusters.html Listing markers in clusters]
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/display_a_map.html Display a map]
 <syntaxhighlight lang="html5">
-<!-- Listing markers in clusters -->
+<!-- Display a map -->
-<!-- Show a list of clustered markers by their coordinates on a map with Mapbox.js. -->
+<!-- Initialize a map in an HTML element with Mapbox GL JS. -->
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset=utf-8 />
+    <meta charset='utf-8' />
-<title>Listing markers in clusters</title>
+    <title></title>
-<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
-<style>
+    <style>
-  body { margin:0; padding:0; }
+        body { margin:0; padding:0; }
-  #map { position:absolute; top:0; bottom:0; width:100%; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
-</style>
+    </style>
+	<script>
+		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+	</script>
+</head>
+<body>
+<div id='map'></div>
 <script>
-var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+mapboxgl.accessToken = '<your access token here>';
+mapboxgl.accessToken = demoAccessToken;
+var map = new mapboxgl.Map({
+    container: 'map', // container id
+    style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
+    center: [19.06, 47.47], // starting position
+    zoom: 15 // starting zoom
+});
 </script>
+</body>
+</html>
+</syntaxhighlight>
+=== Vector tile forrás hozzáadása a térképhez ===
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/add_a_vector_tile_source.html Add a vector tile source]
+<syntaxhighlight lang="html5">
+<!-- Add a vector tile source -->
+<!-- Add a vector source to a map. -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title></title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+	<script>
+		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+	</script>
 </head>
 <body>
-<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
-<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />
-<style>
+<div id='map'></div>
-pre.ui-coordinates {
-  background:rgba(0,0,0,0.5);
-  position:absolute;
-  bottom:10px;
-  left:10px;
-  padding:5px 10px;
-  color:#fff;
-  font-size:11px;
-  line-height:18px;
-  border-radius:3px;
-  max-height:240px;
-  overflow:auto;
-  width:100px;
-  }
-</style>
-<div id='map'></div>
-<pre id='coordinates' class='ui-coordinates'></pre>
-<!-- Example data. (near Hamilton, New Zealand)-->
-<script src="./data/realworld.388.js"></script>
 <script>
-L.mapbox.accessToken = '<your access token here>';
+mapboxgl.accessToken = '<your access token here>';
-L.mapbox.accessToken = demoAccessToken;
+mapboxgl.accessToken = demoAccessToken;
-var map = L.mapbox.map('map', 'mapbox.streets')
+var map = new mapboxgl.Map({
-     .setView([-37.82, 175.215], 14);;
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v9',
+    zoom: 15,
+     center: [19.06, 47.47]
+});
-var markers = new L.MarkerClusterGroup();
+map.on('load', function () {
-for (var i = 0; i < addressPoints.length; i++) {
+    map.addLayer({
-    var a = addressPoints[i];
+        "id": "terrain-data",
-     var title = a[2];
+        "type": "line",
-     var marker = L.marker(new L.LatLng(a[0], a[1]), {
+        "source": {
-        icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
+            type: 'vector',
-         title: title
+            url: 'mapbox://mapbox.mapbox-terrain-v2'
-     });
+        },
-    marker.bindPopup(title);
+        "source-layer": "contour",
-     markers.addLayer(marker);
+        "layout": {
-}
+            "line-join": "round",
+            "line-cap": "round"
+        },
+        "paint": {
+            "line-color": "#ff69b4",
+            "line-width": 1
+        }
+    });
+});
+</script>
+</body>
+</html>
+</syntaxhighlight>
+=== Külső forrásból származó vector tile hozzáadása a térképhez ===
+[http://gis.inf.elte.hu/giswiki/uploads/D9B9SN/add_a_third_party_vector_tile_source.html Add a third party vector tile source]
+<syntaxhighlight lang="html5">
+<!-- Add a third party vector tile source -->
+<!-- Render a map using an external vector source of OpenStreetMap data provided by Mapzen. -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+     <title></title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+	<script>
+		var demoAccessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejh2N21nMzAxMmQzMnA5emRyN2lucW0ifQ.jSE-g2vsn48Ry928pqylcg' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+	</script>
+</head>
+<body>
+<div id='map'></div>
+<script>
+mapboxgl.accessToken = '<your access token here>';
+mapboxgl.accessToken = demoAccessToken;
+var simple = {
+    "version": 8,
+    "sources": {
+        "osm": {
+            "type": "vector",
+            "tiles": ["https://tile.mapzen.com/mapzen/vector/v1/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4"]
+        }
+    },
+    "layers": [
+         {
+            "id": "background",
+            "type": "background",
+            "paint": {
+                "background-color": "#41afa5"
+            }
+        }, {
+            "id": "water",
+            "type": "fill",
+            "source": "osm",
+            "source-layer": "water",
+            "filter": ["==", "$type", "Polygon"],
+            "paint": {
+                "fill-color": "#3887be"
+            }
+        }
+     ]
+};
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: simple,
+    zoom: 1,
+     center: [-14, 35]
+});
-map.addLayer(markers);
+map.addControl(new mapboxgl.NavigationControl());
-function onmove() {
-    // Get the map bounds - the top-left and bottom-right locations.
-    var inBounds = [],
-        bounds = map.getBounds();
-    markers.eachLayer(function(marker) {
-        // For each marker, consider whether it is currently visible by comparing
-        // with the current map bounds.
-        if (bounds.contains(marker.getLatLng())) {
-            inBounds.push(marker.options.title);
-        }
-    });
-    // Display a list of markers.
-    document.getElementById('coordinates').innerHTML = inBounds.join('\n');
-}
-map.on('move', onmove);
-// call onmove off the bat so that the list is populated.
-// otherwise, there will be no markers listed until the map is moved.
-onmove();
 </script>
 </body>

„Mapbox” változatai közötti eltérés

A lap jelenlegi, 2017. május 28., 18:20-kori változata

Tartalomjegyzék

Mapbox, mint cég

Történelem

Munkásság

Külön tájékoztató oldal a logójukról és a nevükről

Árazás

Csomagok összehasonlítása

Fejlődéstörténet

Példák (Mapbox.js)

Térkép (kezdő szint)

Minimális példa egy térkép megjelenítésére

Világtérkép folytonosságának kikapcsolása

Változtatható alapréteg

Térkép nagyításának és mozgatásának letiltása

Megnézhető térképterület leszűkítése határokkal

Dupla kattintásra nagyítás az adott területre középre helyezve + aránymérték

Töltésjelző megjelenítése

Jelölők a térképen

Egyszerű jelölő ikonnal

Jelölő koordinátáinak megjelenítése

Jelölőtől való távolság

Navigáció jelölőket tartalmazó menüvel

Csak a környező jelölők megjelenítése

Jelölő mozgatása programozottan

Jelölő animálása geoJson vonalon

Tippek, üzenetek, szövegek

Egyedi jelölő tipp

Jelölőhöz tartozó tipp megjelenítése egérrel

Helyek

Hely keresése automatikus kiegészítéssel

Hely lekérdezése név alapján (Geocoderrel)

Aktuális pozíció megjelenítése (megközelítőleg)

Útvonaltervezés (Autós, biciklis, gyalogos közlekedéssel)

Plugin támogatás és a Mapbox

Leaflet-MiniMap

Leaflet Fullscreen

Leaflet Heat

Leaflet Markercluster

Listing markers in clusters

Az újabb irányvonal: a Mapbox GL JS megvalósítása és működése a háttérben

Térkép: Mapbox GL a rendereléshez

Adat: Vector Tile

Elemzés: Turf.js

Komponensek közötti kapcsolat

Példák (Mapbox GL JS)

Minimális példa egy térkép megjelenítésére

Vector tile forrás hozzáadása a térképhez

Külső forrásból származó vector tile hozzáadása a térképhez

Felhasználás, alkalmazás

A Foursquare is Mapbox-ra váltott

Mapbox és WordPress: látványos térképek WordPress oldalon kódolás nélkül

Hivatalos bővítmény

Harmadik féltől származó bővítmény

További érdekességek

Térkép a Twitter első 6 milliárd geotaggel ellátott fotója alapján

Források

Navigációs menü

Keresés