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

Innen: GIS Wiki
(Teszt: beágyazni html kódot a wiki oldalba, hogy egyből látható legyen a Mapbox működés közben)
(példa struktúra + új kezdő szintű térképek)
8. sor: 8. sor:
 
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.
 
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.
  
−
=== Példa (egyszerű térkép) ===
+
== Példák ==
−
Minimális példa egy térkép megjelenítésére:
+
=== Térkép (kezdő szint) ===
 +
==== Minimális példa egy térkép megjelenítésére ====
 +
 
 +
[http://zsataai.web.elte.hu/content/mapbox/simple_map.html A simple map]
  
 
<syntaxhighlight lang="html5">
 
<syntaxhighlight lang="html5">
37. sor: 40. sor:
 
L.mapbox.accessToken = demoAccessToken;
 
L.mapbox.accessToken = demoAccessToken;
 
var map = L.mapbox.map('map', 'mapbox.streets')
 
var map = L.mapbox.map('map', 'mapbox.streets')
−
.setView([47.47359112535713, 19.062223434448246], 15);
+
.setView([47.47, 19.06], 15);
 
</script>
 
</script>
 
</body>
 
</body>
43. sor: 46. sor:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
=== Teszt (beágyazni html kódot a wiki oldalba, hogy egyből látható legyen a Mapbox működés közben) ===
+
==== Világtérkép folytonosságának kikapcsolása ====
  
−
$wgRawHtml = True;
+
[http://zsataai.web.elte.hu/content/mapbox/disable_world_wrapping.html Disable world wrapping]
  
−
<hr>
+
<syntaxhighlight lang="html5">
 +
<!-- Disable world wrapping -->
 +
<!-- Instead of loading tiles beyond -180 and 180, only show one copy of the world. -->
  
−
<iframe src="https://www.elte.hu/"
+
<!DOCTYPE html>
−
height="768" width="1366" frameborder="20" scrolling="yes">
+
<html>
−
Alternative text for browsers that do not understand IFrames.
+
<head>
−
</iframe>
+
<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>
  
−
<hr>
+
<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>
 +
</syntaxhighlight>
  
−
{{Special:IframePage|Youtube|path=sYgxTkg2j5Hxoeei/embed}}
+
==== Változtatható alapréteg ====
  
−
$wgIframePageSrc = array( 'YouTube' => 'http://www.youtube.com/embed/', 'Vimeo' => 'http://player.vimeo.com/video/' );
+
[http://zsataai.web.elte.hu/content/mapbox/toggling_baselayers.html Toggling baselayers]
−
$wgIframePageAllowPath = true;
 
  
−
<hr>
+
<syntaxhighlight lang="html5">
 +
<!-- Toggling baselayers -->
 +
<!-- Toggling between three different baselayers. -->
  
−
<include src="https://www.elte.hu" />
+
<!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')
 +
  };
  
−
This is '''wikitext'''.
+
  layers.Streets.addTo(map);
 +
  L.control.layers(layers).addTo(map);
 +
</script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
  
 +
==== Térkép nagyításának és mozgatásának letiltása ====
 +
 +
[http://zsataai.web.elte.hu/content/mapbox/disable_zooming_and_panning.html Disable zooming and panning]
 +
 +
<syntaxhighlight lang="html5">
 +
<!-- Disable zooming and panning -->
 +
<!-- How to disable zooming and panning with Mapbox.js, our open source JavaScript library. -->
 +
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
This is <em>HTML</em>.
+
<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>
 
</html>
 +
</syntaxhighlight>
  
−
{{#widget:Iframe
+
==== Megnézhető térképterület leszűkítése határokkal ====
−
|url=https://docs.google.com/present/embed?id=dcn37mcz_22cmnwnwf8
 
−
|width=410
 
−
|height=342
 
−
|border=0
 
−
}}
 
  
−
<hr>
+
[http://zsataai.web.elte.hu/content/mapbox/using_maxbounds_to_restrict_map_panning.html Using maxBounds to restrict map panning]
  
−
[[embed]]
+
<syntaxhighlight lang="html5">
−
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/michal_frackowiak?icon;size=12-35;color=87ceeb-0000ff;title=my%20del.icio.us%20tags"></script>
+
<!-- Using maxBounds to restrict map panning -->
−
[[/embed]]
+
<!-- Preventing users from leaving an area on the map -->
  
−
[[iframe src="https://www.elte.hu"]]
+
<!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>
 +
</syntaxhighlight>
 +
 
 +
==== Dupla kattintásra nagyítás az adott területre középre helyezve + aránymérték ====
 +
 
 +
[http://zsataai.web.elte.hu/content/mapbox/double_click_to_zoom_+_scale_control.html Double click to zoom]
 +
 
 +
<syntaxhighlight lang="html5">
 +
<!-- 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>
 +
</syntaxhighlight>
 +
 
 +
==== Töltésjelző megjelenítése ====
 +
 
 +
[http://zsataai.web.elte.hu/content/mapbox/show_loading_screen.html Show loading screen]
 +
 
 +
<syntaxhighlight lang="html5">
 +
<!-- 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>
  
−
[[embed]]
+
/*
−
<iframe class="" style="" frameborder="0" width="100%" height="300px" align="" scrolling="auto" src="http://snippets.wdfiles.com/local--code/code:iframe-embed#%3Ch1%3ETESZT%3C/h1%3E"></iframe>
+
* This is a very simple version of a 'loading screen': there are much
−
[[/embed]]
+
* 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');
  
−
[[html]]
+
var map = L.mapbox.map('map')
−
<script type="text/javascript" src="http://del.icio.us/feeds/js/tags/michal_frackowiak?icon;size=12-35;color=87ceeb-0000ff;title=my%20del.icio.us%20tags"></script>
+
    .setView([47.47, 19.06], 13);
−
[[/html]]
 
  
−
<hr>
+
// Add a tile layer with a loading animation
  
−
<div id="mw-mywiki-example"></div>
+
// 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>
 +
</syntaxhighlight>
  
−
$(function () {
+
=== Jelölők a térképen ===
−
  $('#mw-mywiki-example').html('any HTML');
 
−
}());
 
  
−
<hr>
+
=== Tippek, üzenetek, szövegek ===
  
−
{html}<a href="http://www.atlassian.com">Click here</a> to see the <b>Atlassian</b> website.{html}
+
=== Helyek ===
  
−
<hr>
+
=== Térkép és GeoJSON ===
  
−
<iframe width="560" height="315" src="http://www.youtube.com/embed/JOynRkYWFSM" frameborder="0" allowfullscreen></iframe>
+
=== Útvonaltervezés ===
  
−
<hr>
+
=== Plugin támogatás és a Mapbox ===
  
−
<object width="420" height="315"><param name="movie" value="http://www.youtube.com/v/-mcbsrAXlAg?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/-mcbsrAXlAg?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
+
=== Térkép (haladó szint) ===
  
−
<hr>
+
=== Alakzatok, vonalak, rajzolás a térképen ===

A lap 2017. április 1., 17:10-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.

Történelem: A cég startupként indult 2010-ben, Washingtonban. Dolgozóinak száma 2017-re elérte a 180 főt és 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.

További 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.

Példák

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

Tippek, üzenetek, szövegek

Helyek

Térkép és GeoJSON

Útvonaltervezés

Plugin támogatás és a Mapbox

Térkép (haladó szint)

Alakzatok, vonalak, rajzolás a térképen

A lap eredeti címe: „http://gis.inf.elte.hu/giswiki/index.php?title=Mapbox&oldid=311”