æåããå§ãã
ã¡ã€ã³ã®Leaflet APIã§ãã¯ã€ãã¯ã¹ã¿ãŒãã®äŸã«è¿ããããŸã ã 圌ããå§ããŸãã
// create a CloudMade tile layer var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); // initialize the map on the "map" div var map = new L.Map('map'); // set the map view to a given center and zoom and add the CloudMade layer map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade); // create a marker in the given location and add it to the map var marker = new L.Marker(new L.LatLng(51.5, -0.09)); map.addLayer(marker); // attach a given HTML content to the marker and immediately open it marker.bindPopup("A pretty CSS3 popup.<br />Easily customizable.").openPopup();
äŸã¯ãcloudmadeããã¿ã€ã«ã¬ã€ã€ãŒãäœæããããšããå§ãŸããŸãã APIèªäœããby cloudmadeãã®ãããªãã®ã§ãã 泚æã質åã¯æ¬¡ã®ãšããã§ãã芪/å奜çãªãããžã§ã¯ãã«ãšã£ãŠãã¿ã€ã«ã¬ã€ã€ãŒãè¿œå ãã䟿å©ãªæ¹æ³ãäœæã§ããªãã®ã¯äœã§ããïŒ ãã®ãããªã¿ã€ãïŒ
var cloudmade = new L.CloudMade.TileLayer(YOUR-API-KEY);
ïŒ
ãŸãã¯ããã§ããïŒ
map.addLayer('cloudmade', { apiKey: YOUR-API-KEY });
LeafletãšCloudmadeã®é¢ä¿ã¯ããããŸããããCloudmadeã¯ééããªãLeaflet APIã®æåŸã®ã¿ã¹ã¯ã§ã¯ãããŸããã ãŠãŒã¶ãŒãèªåã§Cloudmadeã«èäœæš©ãè¿œå ããããšã匷å¶ããããšã¯ãåžžèã«å¯Ÿããããçš®ã®æŽåã§ãã
ããã³ã°
Google Maps API v2 / OpenLayersãšã¯ç°ãªãããªãŒãã¬ããã¯jQueryã®ãããªãã©ãã€ã ãæäŸããŸãïŒã»ãšãã©ã®ã¢ã¯ã·ã§ã³ã¯æè¿ã§ãïŒã ã§ã¯ãäœãæ¥ãããããå±ã§ããïŒ
var marker, map = (new L.Map('map')) .setView(new L.LatLng(51.505, -0.09), 13) .addLayer('cloudmade', { apiKey: YOUR-API-KEY }) .addLayer((marker = new L.Marker(new L.LatLng(51.5, -0.09))) .bindPopup("A pretty CSS3 popup.<br />Easily customizable.") ); marker.openPopup();
ã¡ãªã¿ã«ãäžèšã®äŸããããªããžã§ã¯ãã¢ãããŒããšããã³ã°ãæ··åããããšã®äžäŸ¿ãã¯ã¯ã£ãããšèŠããŸã-ïŒæ°ããXïŒïŒïŒãYïŒïŒã¯JSã§æãçŸããæ§é ã§ã¯ãããŸããã
ãšããã§ãaddLayerã§ããŒã«ãŒãè¿œå ããã®ã¯ãªãã§ããïŒ Leafletã®L.Layerã¯ãå®å šã«ç解å¯èœãªç¬ç«ãããšã³ãã£ãã£ãã€ãŸãã¬ã€ã€ãŒã§ãã addLayerãä»ã®ãšã³ãã£ãã£ïŒããŒã«ãŒããžãªã¡ããªïŒãè¿œå ããã®ã¯ãªãã§ããïŒ
ãããŠãaddLayerãšaddMarkerã«éãããªãå ŽåïŒã€ãŸããè¿œå ã®ããžãã¯å šäœããªããžã§ã¯ãèªäœã§ä¿è·ãããŠããå ŽåïŒããã®ã¡ãœããããªããžã§ã¯ãèªäœã«è€è£œããã®ã¯è«ççã§ã¯ãããŸãããïŒ
var map = (new L.Map('map')) .setView(new L.LatLng(51.505, -0.09), 13) .addLayer('cloudmade', { apiKey: YOUR-API-KEY }), marker = (new L.Marker(new L.LatLng(51.5, -0.09))) .appendTo(map) .bindPopup("A pretty CSS3 popup.<br />Easily customizable.") .openPopup();
ããŠãã³ã³ã¹ãã©ã¯ã¿ããã¡ã¯ããªã«çœ®ãæãããšãéåžžã«ããŸããããŸãïŒ
var map = L.map('map') .setView(L.latLng(51.505, -0.09), 13)) .addLayer('cloudmade', { apiKey: YOUR-API-KEY }), marker = L.marker(L.latLng(51.5, -0.09)) .appendTo(map) .bindPopup("A pretty CSS3 popup.<br />Easily customizable.") .openPopup();
å ã®äŸãšæ¯èŒããŠãã ããã
ã¡ãªã¿ã«ãå ãèŠãŠãsetViewãšaddLayersã¯ã³ã³ã¹ãã©ã¯ã¿ãŒã§çŽæ¥è¡ãããšãã§ããŸãããã®æ©èœãã¯ã€ãã¯ã¹ã¿ãŒãã§æ£ããäœæããŠã¿ãŸãããïŒ
æŽã£ãŠããªãæãããã
ããããŸãããããªãã®IPAã䜿ããããšæããŸãã ç§ã¯ã³ãŒããèŠãŠ...äžæè°ã«æãã æ¥ç¶æ¹æ³ã¯ïŒ ããŠãç解ããŸãã-ãªãããããçš®é¡ã®htmlã¿ã°ãªã©ã§ãµã³ãã«ããªãŒããŒããŒãããŸãããAPIãæ¥ç¶ããæ¹æ³ã瀺ãå¿ èŠããããŸãã ãã§ãã¯ããŠãäŸãšããŠè¡ããŸãããã
ãããã®ã³ãŒããèšè¿°ããåã«ãããŒãžã§æ¬¡ã®æºåæé ãå®è¡ããå¿ èŠããããŸãã
ããã¥ã¡ã³ãã®ãããã»ã¯ã·ã§ã³ã«Leaflet CSSãã¡ã€ã«ãå«ããŸãã
<link rel="stylesheet" href="leaflet/leaflet.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="leaflet/leaflet.ie.css" /><![endif]-->
Leaflet JavaScriptãã¡ã€ã«ãããŒãžäžã®ã©ããã«ïŒã§ããã°body closeã¿ã°ã®åã«ïŒå«ããŸãã
<script src="leaflet/leaflet.js"></script>
ããããé 眮ããå Žæã«ç¹å®ã®IDãæã€divèŠçŽ ãé 眮ããå¹ ãšé«ããå®çŸ©ãããŠããããšã確èªããŸãã
<div id="map" style="height: 200px"></div> <!-- width equals available horizontal space by default -->
ããã§ãããããåæåããããã䜿ã£ãŠäœããè¡ãæºåãã§ããŸããã
ãã®æç¹ãŸã§ïŒäŸã«å ¥ãåã«æ¢ã«ããã¯ãèªãã§ããïŒããªãŒãã¬ããã¯éåžžã«å¿å°ããå°è±¡ãæ®ããŸããã ãããããã®å°ããªäŸã§ã¯ããã¹ãŠã®ããã¥ã¡ã³ãããŸãšãããããå€ãã®çåãçããŸãã
ãŸã第äžã«ããªãŒãã¬ããã³ãŒããå«ããªãŒãã¬ãããã©ã«ãã¯ç§ã®ããŒãžã®ã©ãããæ¥ãã®ã§ããïŒ ããã¯åãªãã©ã€ãã©ãªã³ãŒãã®åãåãã§ããããããŒãžã®æºåãã»ã¯ã·ã§ã³ã§èª¬æããå¿ èŠãããããã§ãã ãããªã³ã¯ãã©ãã«ãéããªãããšã«ãŠã§ããã¹ã¿ãŒãç°¡åã«æ°ã¥ããšæããªããgithubã«ç»ã£ãŠã³ãŒããããŠã³ããŒãããŠãã ãã-ããªãã¯éåžžã«æ·±ãééããããŠããŸãã ãã³ãŒããã³ããŒããŸãã-äœãæ©èœããŸãã-ã©ãããã°ããã§ããïŒããšãã質åãããªãã®ãµããŒãã«ããµããŠãããšç¢ºä¿¡ããŠããŸãã
ããã«ããªããŠã§ããã¹ã¿ãŒã«CSSæ¥ç¶ã³ãŒããèªåã§æçš¿ãããã®ã§ããïŒ ãã®äœæ¥ãjsã¹ã¯ãªããã«ä»»ããŠã¿ãŸãããïŒ ïŒã¡ãªã¿ã«ãIEã§ã®æ£åžžãªå£åã¯ç§ã®æ¬æã§ããïŒ
ãããããã®ã³ã¡ã³ãã¯ãå¹ ã¯ããã©ã«ãã§å©çšå¯èœãªæ°Žå¹³ã¹ããŒã¹ã«çããã-誰ã®ããã§ããïŒ HTMLã«ã€ããŠå šãç¥ããªã人ã®ããã«ïŒ ãŸãããã®ã³ã¡ã³ãã¯ããããæ··ä¹±ãããã ãã§ãã ïŒaïŒããŒãžäžã®leaflet / leaflet.jsãã©ãããæ¥ãã®ããgithubããã³ãŒããããŠã³ããŒãããæ¹æ³ãïŒbïŒCSSæ¥ç¶ã®ãããã®éæ³ã®ã³ã¡ã³ãã¯äœã§ãåçŽã«åé€ã§ããªãçç±ã説æããå¿ èŠããããŸãã
ãã®ã³ãŒããmap divãšleaflet.jsã®äž¡æ¹ã®ã€ã³ã¯ã«ãŒãã®äžããŸãã¯window.loadãŸãã¯document.readyã€ãã³ããã³ãã©ãŒå ã«ããããšã確èªããŠãã ããã
ããªãã¯ãã£ãŒããããã©ã«ãã§100ïŒ ããã©ã«ãã§ããããšããŠã§ããã¹ã¿ãŒã«èª¬æããŸãããç£ã®window.loadã®çš®é¡ãšãã®ãã³ãã©ã«ã³ãŒããè¿œå ããæ¹æ³ãå ±åããå¿ èŠã¯ãªããšèããŠããŸããïŒ
ãŠã§ããã¹ã¿ãŒãããªããããã äžã€ã®ããšãæãã§ããããšãç解ããŠãã ããïŒã³ãŒãã®äžéšãã³ããŒããŠããããæ©èœãããã ã©ãã§ãåäœããŸã-å°ãªããšãwindow.onloadã®åãããã«ã¯åŸã§ããå°ãªããšãé ã«ãå°ãªããšã身äœã«å ¥ããŠãã ããã ãããŠãã©ãããã°ããããå®å šã«ç解ã§ããŸããïŒçªç¶ãµãŒãããŒãã£ã®ã©ã€ãã©ãªã䜿çšããå¿ èŠãããå ŽåãæåŸã«ãããããšã¯åèäŸãéžã³ããããç§ã®ç°å¢ã§æ©èœããªãçç±ãç解ããããšã§ãã
ããŠãç§ã¯è±ç·ããŸãã firebugã調ã¹ãŸãã çãããäžæ£è¡çºè ã§ãïŒ 25 Kb JS APIã¯ãããçš®ã®éè¡ã§ãã ããã«ãå å®ã§ç¡æ¡ä»¶ã®5ã€ããããŸãã ãšããã§ã_leaflet_resize3é¢æ°ã¯ãvarãå¿ããå Žæã®ã°ããŒãã«åå空éïŒv0.3ïŒã§èŒããŠããŸãã
ãã1ã€é©ãã¹ãããšã§ãããã®ã©ã€ãã©ãªãèªåã§ãã¹ãããŠããŠãŒã¶ãŒã®ãã¡ã€ã³ãã匷å¶çã«æ¥ç¶ããŠã¿ãŸãããã ãŸãããªããŠè² è·ã§ãããŒãããŒãšåæããããšã¯å¯èœã§ãã ãããããŠãŒã¶ãŒã¯ããŒãžã§ã³ã®æŽæ°ïŒããã³é ããæ©ãã衚瀺ãããå€ãããŒãžã§ã³ã®é倧ãªãã°ïŒã«åé¡ã¯ãããŸãã+ã©ã€ãã©ãªã®é åžã«ãããã»ãšãã©ã®ãŠãŒã¶ãŒã¯ããã«ãã£ãã·ã¥ã«æ ŒçŽãããŸãã
ãã¶ãŒã
ããŠãäŸãçµäºããŠããããã- ããã¥ã¡ã³ãã«ç§»åããŸã ã ãããŠããã«è³ªå-ãªãããã€ãã®ãªã³ã¯ã¯ç°è²ã§ã©ãã«ãéããªãã®ã§ããïŒ ããã¥ã¡ã³ãã®æºåãã§ããŠããŸãããïŒ äœãå£ããŸãããïŒ ããŒããããïŒ ãšããã§ããã®ããã¥ã¡ã³ãã®ã©ã®ããŒãžã§ã³ã«-å®å®ãã0.2ãŸãã¯dev 0.3ã§ããïŒ
èªã¿å§ããŸãã
// initialize the map on the "map" div with a given center and zoom var map = new L.Map('map', { center: new L.LatLng(51.505, -0.09), zoom: 13 }); // create a CloudMade tile layer var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18}); // add the CloudMade layer to the map map.addLayer(cloudmade);
äžå€®ã®ããããšãºãŒã ãããããã¶ã€ããŒã§èšå®ã§ããããšãããããŸããã ãããŠãããªãã¯å°ããããšãã§ããŸããã ãããŠãã»ã³ã¿ãŒã®ã¿ãèšå®ãããŠããå Žåã¯ã©ããªããŸããïŒ ãããšãåã«ãºãŒã ïŒ ãããŠæãéèŠãªã®ã¯ã誰ãåæåãããŠããªãã«ãŒããå¿ èŠãšããŠããã®ãïŒ ã©ã®ãããªæ©èœããããŸããïŒ
ç¹°ãè¿ãã«ãªããŸãããã¯ã©ãŠãã§äœæãããã¬ã€ã€ãŒã®äœæã¯éåžžã«æåã®æ®µéã«ãããŸãã ãšããã§ãçŸåšèäœæš©ã衚瀺ããããšã¯ã§ããŸãããïŒ
ããããã©ã¡ãŒã¿ã調ã¹å§ããŸãã
ã¬ã€ã€ãŒILayer [] []æåã«ãããã«è¿œå ãããã¬ã€ã€ãŒã
ã¬ã€ã€ãŒã¯ãã¶ã€ããŒã§çŽæ¥èšå®ã§ããããšãããããŸããã ããã§ã¯ãããªãã®äŸã§ã¯äœãèããªãã®ã§ããïŒ
minZoom Number 0ãããã®æå°ãºãŒã ã¬ãã«ã ãããã¬ã€ã€ãŒã«èšå®ãããminZoomããªãŒããŒã©ã€ãããŸãã
maxZoom Number 18ãããã®æ倧ãºãŒã ã¬ãã«ã ããã¯ããããã¬ã€ã€ãŒã«èšå®ãããmaxZoomããªãŒããŒã©ã€ãããŸãã
ãã® ããããªãã·ã§ã³ãåžžã«ã¬ã€ã€ãŒãªãã·ã§ã³ãšãªãŒããŒã©ããããããã©ã«ãå€ãããå Žå-ã¬ã€ã€ãŒãªãã·ã§ã³ãå¿ èŠãªçç± æ確ã§ã¯ãããŸãã...
dragging Boolean trueããããããŠã¹/ã¿ããã§ãã©ãã°å¯èœã«ãããã©ããã
touchZoom Boolean true 2æ¬ã®æã§ã¿ãããã©ãã°ããããšã§ãããããºãŒã ã§ãããã©ããã
scrollWheelZoom Boolean trueããŠã¹ãã€ãŒã«ã䜿çšããŠãããããºãŒã ã§ãããã©ããã
doubleClickZoom Boolean trueããããããã«ã¯ãªãã¯ããŠãºãŒã ã€ã³ã§ãããã©ããã
4ã€ã®ãªãã·ã§ã³ã®ãã¡3ã€ã¯äžå®è©ã§ã1ã€ã¯ååè©ã§ãã 次ã«ããã©ãã°ããããïŒã¿ãã| scrollWheel |ããã«ã¯ãªãã¯ïŒãºãŒã ããŸãã
ããã«èå³æ·±ãã®ã¯ãILayerãåå¥ã®ã¬ã€ã€ãŒé åãªãã·ã§ã³ãæäžãããã®ã«å¯ŸããIHandlersããã³IControlsã¯æäžãããªãçç±ã§ãã ããã¯ãã£ãšè«ççã§ã¯ãªãã§ããïŒ
handlers IHandler[] ['drag', 'touchZoom', 'scrollWheel', 'doucleClick'] Map handlers that will be enabled initially
ãŸããã³ã³ãããŒã«ã«ã€ããŠãåãããã«ã
åãèæ ®äºé ãã«ãŒãã®ããããã£ã«é©çšãããŸãã åçŽã«æžããŠã¿ãŸãããïŒ
map.hadlers('drag').enable()
ãã®ãããªãœãªã¥ãŒã·ã§ã³ã¯ãïŒaïŒå€ãã®äžèŠãªãªãã·ã§ã³ãšããããã£ããã¯ã©ã¹ã€ã³ã¿ãŒãã§ã€ã¹ããªãããŒãããïŒbïŒæ°ããã³ã³ãããŒã«ãšãã³ãã©ãŒãããæ£åŒã§äŸ¿å©ã«è¿œå ããŸãã
ã«ãŒãã«å®èŠãè¿œå ããIHandlerã®åœ¢åŒã§æ£ããèšèšããããšããŸãã L.Mapãç¶æ¿ãã次ã®ãããªããšãããå¿ èŠããããŸãã
var MyMap = function (id, options) { L.Map.call(this, id, options); this.ruler = new MyRulerHandlerClass(map); if (options && options.ruler) { this.ruler.enable(); } }
ç§ãããªããã°ãªããªãã®ã¯ã次ã®ãããªããšãããããšã§ã
L.handlers.register('ruler', MyRulerHandlerClass)
ãšã€ãªã¢ã¹ã«ãã£ãŠã«ãŒãã®IHandlerã®éçã¹ãã¬ãŒãžãååŸããå Žåã
ã€ãã³ãã«ç§»ããŸãããã
mouseEventãŠãŒã¶ãŒãããããã¯ãªãã¯ïŒãŸãã¯ã¿ããïŒãããšãã«çºçããŸãã
dblclick MouseEventãŠãŒã¶ãŒãããããããã«ã¯ãªãã¯ïŒãŸãã¯ããã«ã¿ããïŒãããšãã«çºçããŸãã
mousedown MouseEventãŠãŒã¶ãŒããããäžã§ããŠã¹ãã¿ã³ãæŒããšçºçããŸãã
mouseupãcontextmenuãmouseenterãmouseleaveã¯ã©ãã§ããïŒ mousedownã€ãã³ããæäŸããmouseupã«ãªãã¹ã³ãããªãããšã¯ãã©ããããããéåžžã«å¥åŠã§ãã
loadã€ãã³ãããããåæåããããšãïŒäžå¿ãšãºãŒã ãåããŠèšå®ããããšãïŒã«çºçããŸãã
viewresetã€ãã³ãããããã³ã³ãã³ããåæç»ããå¿ èŠããããšãã«çºçããŸãïŒããã¯éåžžããããã®ãºãŒã ãŸãã¯ããŒãã§çºçããŸãïŒã ã«ã¹ã¿ã ãªãŒããŒã¬ã€ã®äœæã«éåžžã«äŸ¿å©ã§ãã
ã«ãŒãã®åæåãããŠããªãç¶æ ãåé€ãããšãããã2ã€ã®ã€ãã³ãã¯æ¶ããŸãã ã¡ãªã¿ã«ããã¹ãŠã®ã¿ã€ã«ãèªã¿èŸŒãŸããããšã瀺ãèªã¿èŸŒã¿ã€ãã³ãã¯ãã¯ããã«äŸ¿å©ã§ãã
movestartã€ãã³ããããã®ãã¥ãŒã®å€æŽãéå§ããããšçºçããŸãïŒããšãã°ããŠãŒã¶ãŒããããã®ãã©ãã°ãéå§ããŸãïŒã
ããããã¥ãŒã®ä»»æã®åãã§çºçããã€ãã³ãã
moveendã€ãã³ããããã®ãã¥ãŒã®å€æŽãçµäºãããšãã«çºçããŸãïŒããšãã°ããŠãŒã¶ãŒããããã®ãã©ãã°ãåæ¢ããïŒã
dragstartã€ãã³ããŠãŒã¶ãŒããããã®ãã©ãã°ãéå§ãããšçºçããŸãã
dragã€ãã³ããŠãŒã¶ãŒããããããã©ãã°ããŠããéã«ç¹°ãè¿ãçºçããŸãã
dragendã€ãã³ããŠãŒã¶ãŒããããã®ãã©ãã°ãåæ¢ãããšçºçããŸãã
zoomendã€ãã³ããããã®ãºãŒã ãå€æŽããããšãã«çºçããŸãã
移åã€ãã³ãã®2ã€ã®ã»ãã-move *ãšdrag *ãå¿ èŠãªçç±ã¯äœã§ããïŒ ãŠãŒã¶ãŒã¢ã¯ã·ã§ã³ãšããã°ã©ã ã¢ã¯ã·ã§ã³ãåºå¥ããã«ã¯ïŒ ã§ã¯ããªããºãŒã ãè¡ãããªãã®ã§ããïŒ zoomstartãzoomãscrollzoomstartãscrollzoomãscrollzoomendãè©ŠããŠã¿ãŸãããïŒ æ確ã§ã¯ãããŸããã
layeradd LayerEventæ°ããã¬ã€ã€ãŒããããã«è¿œå ããããšçºçããŸãã
layerremove LayerEventã¬ã€ã€ãŒããããããåé€ããããšçºçããŸãã
ããŒã«ãŒãè¿œå ãããšããããã®åãã€ãã³ããã¹ããŒãããããšãç解ããŠããŸããïŒ ã©ããã£ãŠèŠã€ããã®ã§ããïŒ ã¬ã€ã€ãŒã®æŠå¿µã¯ãŸã å°å ¥ãããŠããŸãããåèªã¯ããã°ã©ã ãšã³ãã£ãã£ãšããŠãã©ã³ãã§åŒ·èª¿è¡šç€ºãããŠããŸããããªã³ã¯ã¯ãããŸããã
locationfound LocationEventãžãªãã±ãŒã·ã§ã³ïŒlocateãŸãã¯LocateAndSetViewã¡ãœããã䜿çšïŒãæ£åžžã«å®äºãããšãã«çºçããŸãã
locationerror ErrorEventãžãªãã±ãŒã·ã§ã³ïŒlocateãŸãã¯LocateAndSetViewã¡ãœããã䜿çšïŒã倱æãããšãã«çºçããŸãã
ãããŠãåé¡ã®ãããã®éæ³ã®æ¹æ³ãã©ãã§èŠãããšãã§ããŸããïŒ èª¬æå ã®ã€ãã³ãã®åŸãããã€ãã®äºæž¬ãè¡ããããªã³ã¯ã¯ãããŸããã ãšããã§ããããã€ã³ã¿ãŒãã§ã€ã¹ã®èª¬æã§æ圱ãè¡ãããšã¯ãç§ã«ã¯ãŸã£ããç解ã§ããŸããã
å°å³ãã€ã³
ã«ã¹ã¿ã ãªãŒããŒã¬ã€ãé 眮ããããã«äœ¿çšã§ããããŸããŸãªããããã€ã³ãå«ããªããžã§ã¯ããªãã©ã«ã éãã¯ãäž»ã«ãã®ãããªãªãŒããŒã¬ã€ãååŸããzIndexã®é åºã«ãããŸãã
ãã£ãããã ããã¯äœã§ãã ããã«ã¢ã¯ã»ã¹ããæ¹æ³ã¯ïŒ ããã¯ãã£ãŒã«ãã§ãã¡ãœããã§ãã€ãã³ãã§ããããŸãããã©ããªåç©ã§ããïŒ äŸã¯ãããŸããã
ã¡ãœããã«æž¡ããŸãã å°å³ã®ç¶æ ãå€æŽããæ¹æ³/å°å³ã®ç¶æ ãååŸããæ¹æ³/ã¬ã€ã€ãŒãšã³ã³ãããŒã«ã®æ¹æ³/å€ææ¹æ³/ãã®ä»ã®æ¹æ³ïŒããã¹ãŠã®åç©ã¯aïŒçåžã«å±ãããbïŒé²è ãcïŒé£ŒããªãããããdïŒãã«ã¯è±ã eïŒãµã€ã¬ã³ãeïŒçŽ æŽããããgïŒéè¯ç¬ãhïŒãã®åé¡ã«å«ãŸãããããã³ïŒçã£ãããã«èµ°ããkïŒæ°ããããªããkïŒã©ã¯ãã®æ¯ã§äœãããæé«ã®ãã©ã·ã§æããããmïŒãã®ä»ãnïŒæ°Žå·®ããæã£ããoïŒé ãããããšã«äŒŒãŠããŸã...ïŒïŒã¡ãœããã®äž»ãªåé¡ã瀺åããŠãããããã¡ãœãããå€ãããŸãã ãããŠãæãéèŠãªããšã¯ãããã«ãã£ãšããããšã§ãã ã¡ã€ã³ã¯ã©ã¹ã®ã€ã³ã¿ãŒãã§ã€ã¹ã«ãæã 圹ç«ã€ãã¡ãœãããé 眮ãããšãäœããèŠã€ããããšãã§ããªããããããã«ãããã¯ãŸã£ãã圹ã«ç«ããªããªããŸãã äœãããå¿ èŠããããŸã:)ããšãã°ãã¡ãœãããå éšãªããžã§ã¯ãã®ãããã·ã§ããå Žåãã¡ãœããããããã·ãã代ããã«ãã®ãªããžã§ã¯ããéãããšã¯äŸ¡å€ããããŸããïŒ ããŠãå€ãã®ã¡ãœããã¯åçŽã«åé·ã§ã-ããšãã°ãlocateã¡ãœãããªãã·ã§ã³ã§setViewãã©ã°ãåé¿ããããšãã§ããã®ã«ããªãã©ãããŠLocateããã³LocateAndSetViewã¡ãœãããå¿ èŠãªã®ã§ããããïŒ setZoomããããšãã«zoomIn / zoomOutã¡ãœãããå¿ èŠãªã®ã¯ãªãã§ããïŒ
ïŒè¿œå |åé€ïŒã¬ã€ã€ãŒã¡ãœããã«ã¯ãã¬ã€ã€ãŒãšã¯äœã®ãã³ãããããŸããã å¥åŠãªããšã«ãã³ã³ãããŒã«ã¡ãœããã¯ïŒè¿œå |åé€ïŒãããŸããããã³ãã©ã¡ãœããã¯ãããŸããïŒè¿œå |åé€ïŒã ãããŠãæ°ããã³ã³ãããŒã«ãè¿œå ãããšã©ããªããŸãã-.controlNameãã£ãŒã«ãããããã«è¡šç€ºãããŸããïŒ ã©ããã-ãããã
åèšã§ãããããšã³ãã£ãã£ãè¿œå ãåé€ãã¢ã¯ã»ã¹ããããã®4ã€ã®ççŸããæ¹æ³ãæ¢ã«ãããŸãã
1ïŒã¬ã€ã€ãŒã®å ŽåïŒãªãã·ã§ã³ã®ã¬ã€ã€ãŒã®é åãïŒè¿œå |åé€ïŒã¡ãœããã®ã¬ã€ã€ãŒã
2ïŒIHandlerã®å ŽåïŒååä»ããªãã·ã§ã³ã®ã»ãããååä»ãããããã£ã®ã»ãããæ°ãããªãã·ã§ã³ã®è¿œå æ¹æ³ã¯ãŸã£ããæ確ã§ã¯ãããŸããã
3ïŒIControlã®å ŽåïŒååä»ããªãã·ã§ã³/ããããã£ã®ã»ãããšãååã®ãªãã³ã³ãããŒã«ã®ã€ã³ã¿ãŒãã§ã€ã¹ïŒè¿œå |åé€ïŒã³ã³ãããŒã«ã®äž¡æ¹ã
4ïŒMapPanesã®å Žåããã€ã³ã®ãªã¹ããå«ããªãã©ã«ãè¿ããããã¡ãœããã
éãå€ãããŠãããã¥ã¡ã³ããäžååã§ãã
ããŒã«ãŒ
ããŒã«ãŒã€ã³ã¿ãŒãã§ã€ã¹ã¯ããããã®æŽåã«æ¯ã¹ããšå£ã£ãŠããŸãããåºçæã®æå·ã.draggingã®åœ¢ã§ç¶æ¿ããŠããŸãã ã¢ã€ã³ã³ãç¡å¹ã«ã§ããªãããšã¯åã°ããããšã§ã¯ãããŸããããããã«ããã€ãã®ããŒã¿ãããŒã«ãŒã«é¢é£ä»ãããã€ãã£ãæ©èœããªãããšã¯åã°ããããšã§ã¯ãããŸããã ããŒã«ãŒã¯ããçš®ã®å°ççãšã³ãã£ãã£ã«å¯Ÿå¿ããã»ãšãã©ã®å Žåãããçš®ã®èå¥åãååã説æãäœæãªã©ãæã¡ãŸããã¯ã©ã¹ãç¶æ¿ããŠæ¡åŒµããããã¯ããŒãžã£ãŒã§ããªãã¯ãããããã¹ãŠãåãåºããŠæžãã ãã§ãŠãŒã¶ãŒã«åŒ·å¶ããŸãmarker.id = 'myid'ã ãã¹ãŠã®ãªãã·ã§ã³ã¯ããŸãçŸãããªããæœåšçã«å±éºã§ãã
clickable Boolean true falseã®å ŽåãããŒã«ãŒã¯ããŠã¹ã€ãã³ããçºçãããåºã«ãªããããã®äžéšãšããŠæ©èœããŸãã
ééã£ã解決çã¯ããªããžã§ã¯ãã®å¯Ÿè©±æ§ããã¯ãªãã¯å¯èœããšåŒã¶ããšã§ãã
ããããã¯ãªãã¯ããã®ã€ãã³ããã¹ããããããã©ããã決å®ãããå Žåã¯ã©ãããã°ããã§ããïŒ ããŠã¹ããŒããžã®ã¢ã¯ã»ã¹ã¯ãããŸããã
ã¯ãªãã¯ã§ãã©ã³ãéãããã©ãã°ã§ãããããã©ãã°ããå Žåã¯ã©ãããã°ããã§ããïŒ ããã¯ããæ®éã®ã±ãŒã¹ã§ããããšãã°ãGoogleãããã®å ¬å ±äº€éæ©é¢ã®åçæãã芧ãã ããã
draggable Boolean falseããŒã«ãŒãããŠã¹/ã¿ããã§ãã©ãã°å¯èœãã©ããã
ç§ãç解ããŠããããã«ãããŒã«ãŒ.draggingãã£ãŒã«ãã¯ããã©ãã°å¯èœãªãªãã·ã§ã³ã«é¢ä¿ãªããã©ã®ãããªå Žåã§ããããŸããïŒ ãããŠã.dragging.enableïŒïŒã®åŒã³åºãã匷å¶ãããšã©ããªããŸããïŒ ã«ãŒãã«ãã©ãã°ãšåŒã°ãããã®ãªãã·ã§ã³ãããã®ã¯ãªãã§ããïŒ çµå±ã®ãšãããããã¯ã«ãŒããšãŸã£ããåãIHandlerããã©ãã°ããããã®ãã®ã§ã-ãªãä»ã®ãªãã·ã§ã³ãããã®ã§ããïŒ
mousedownã€ãã³ãã¯ã©ãã«è¡ããŸãããïŒ
ã¡ãªã¿ã«ãç§ã¯ããŒã«ãŒãã¬ã€ã€ãŒã§ãããšããäºå®ãèªèããŠããŸããã§ããã ãã®å¥åŠãªã¢ã€ãã³ãã£ãã£ã瀺åããã®ã¯ãŸã äŸã ãã§ãã ããã¥ã¡ã³ãã§ã¯ãããªãŒããŒã¬ã€ããšããçšèªã䜿çšãããŸããããããã©ãã«ãå®çŸ©ãããŠãããããšã³ãã£ãã£åã«ãå«ãŸããŠããŸããã
ãããã¢ãã
çºçããæåã®è³ªåã¯ããšã³ãã£ãã£L.Popupãããå ŽåãL.Popupã¯ã©ã¹ã®ã€ã³ã¹ã¿ã³ã¹ãbindPopupã«æž¡ãããšã¯ã§ããŸããïŒ ããã¥ã¡ã³ãã«ãããšãããã¯ãªãããšãå€æããŸããã ãããŠããããã¢ããããã€ã³ããããããŒã¿ãšãªãã·ã§ã³ã®ã¿ããã€ã³ãããå ŽåãbindPopupãšåŒã°ããã¡ãœããã¯ãªãã§ããïŒ
autoPan Boolean trueãããã§éããããããã¢ããã«åãããŠãã³ã¢ãã¡ãŒã·ã§ã³ãè¡ããªãå Žåã¯ãfalseã«èšå®ããŸãã
closeButton Boolean trueãããã¢ããå ã®éãããã¿ã³ã®ååšãå¶åŸ¡ããŸãã
ãã®ä»ã®ãªãã·ã§ã³åã autoPan =èªåçã«ç§»åããå ŽåãcloseButton =ãã¿ã³ãéããŸããããéãããã¿ã³ã®ååšãã§ã¯ãããŸããã
ãšããã§ãDOMãžã®ã¢ã¯ã»ã¹ããªãå Žåãhtmlã³ã³ãã³ããèšå®ãããã€ã³ãã¯äœã§ããïŒ ãªãããªhtmlã³ã³ãã³ããã«ãŒã³ãèšå®ãããããã€ã³ã¿ã©ã¯ãã£ãæ©èœãè¿œå ãããã®ã§ãããhtmlã«ããããã¢ããã€ãã³ãã«ãã¢ã¯ã»ã¹ã§ããŸããã
ãããã¢ããã®ã€ã³ã¿ã©ã¯ãã£ããªèšå®ã¯ãããŸããããç¡é§ã§ã¯ãããŸããããããŒã«ãŒãããå¿ èŠã§ãã ããšãã°ãã¹ã¯ããŒã«ã¯åžžã«ãããã«ç¡æ¡ä»¶ã§æž¡ãããŸããã€ãŸããã¹ã¯ããŒã«ãããã³ã³ãã³ãããããã¢ããã«é 眮ããããšã¯ã§ããŸããã
ã¬ã€ã€ãŒ
ã¯ã©ãŠãã¡ã€ãã¬ã€ã€ãŒã®æ²ãã¿ã«ã€ããŠã¯ãã§ã«èšåããŸããã äœããã®çç±ã§ãä»ã®ãµãŒãã¹ïŒWMSïŒã«ã¯ã䟿å®äžãå¥åã®ã¯ã©ã¹ãèšå®ãããŠããŸããããã€ãã£ãã¯ã©ã¹ã¯èšå®ãããŠããŸããã
minZoomãšmaxZoomãšã¯äœã§ããããããèšå®ããããããªãŒããŒã©ã€ãããæ¹æ³ã¯èª¬æãããŠããŸããã ãã¿ã€ã«ãµã€ãºãèšå®ãå°å ¥ãããçç±ãäžæã§ãã å žåçãªãŠãŒã¶ãŒã®å Žå-å¥ã®æ圱ïŒwgs84ãªã©ïŒã«ã¬ã€ã€ãŒãé©çšããæåŸã®çž®å°ºã®ã¿ã€ã«ãã¹ãã¬ãããããããã«+1ãŸãã¯+2瞮尺ãè¿œå ããŸã-ãã®èšå®ã¯è§£æ±ºããŸããã
ããã¹ãŠã®ã¿ã€ã«ãèªã¿èŸŒãŸãããã€ãã³ãã®æçšæ§ã«ã€ããŠã¯æ¢ã«è¿°ã¹ãŸããã
TileLayer.Canvasãšã¯äœãªã®ãç解ã§ããŸããã§ããã ããã¥ã¡ã³ããŒã·ã§ã³ã«ã¯ã圌ãšã®1ã€ã®æ¹æ³ãæ£ç¢ºã«èšèŒãããŠããããã®äŸã§ã¯ããªã圌ãå¿ èŠãªã®ãããããŸããã
ã°ã©ãã£ãã¯ã¹
ã°ã©ãã£ãã¯èŠçŽ ã¯ãããŒã«ãŒãšããŠã¯ãªãã¯å¯èœãªåãå°å·ãç¶æ¿ããŸãã ãšããã§ããªããã©ãã°å¯èœã«ãã蟌ãŸããŠããªãã®ã§ããïŒ ãªããžã§ã¯ããã¹ããŒããã€ãã³ãã®æ°ã¯ãããã¥ã¡ã³ããæ·±ãæãäžããã«ã€ããŠæžå°ããŸã:)
ãªãã·ã§ã³ãèšå®ããsetStyleã¡ãœããã¯å¥åŠã§ãã
ãžãªã¡ããªã¯ãã€ã³ãã®é åã«ãã£ãŠå®çŸ©ãããŸã-ã©ããããããäžè²«æ§ããããŸããã ãã€ã³ãèªäœã¯æ°ããLatLngã§æå®ããå¿ èŠãããããžãªã¡ããªã¯ç¹å¥ãªé åã§ã¯ãªããéåžžã®é åã䜿çšããŠããªã©ã€ã³ã«ããã·ã¥ã§ããŸãã ãªããžã§ã¯ãã ãããããŠãŒã¶ãŒããã®ã¡ãœãããAPIã¡ãœããã®åšãã«åå²ãããšã©ããªããŸããïŒ ã°ã©ãã£ãã¯ã¹ã«ã¯æŽæ°ã¡ãœããããããŸããã
ãããªã©ã€ã³ã¯ãªããã³ã°ãç¡å¹ã«ããŸãããšããã³ã¡ã³ããä»ããnoClipãªãã·ã§ã³ã ç¹ã«ãä»ã®ãžãªã¡ããªã«ã¯åããªãã·ã§ã³ããããŸããã
ãµãŒã¯ã«ã«ã€ããŠäœãç¥ã£ãŠããŸããïŒ
ã©ã€ã³äžã®ã©ã€ã³ãã£ãããéããŠæãããåã¯æ¥œããã¢ã€ãã¢ã§ãã å¯äžã®åé¡ã¯ãã¡ã«ã«ãã«å³æ³ã®ååŸãnã¡ãŒãã«ã®ãæ£çŽãªãåããŸã£ããåã§ã¯ãªããæ¥åã§ã¯ãªããè€éãªå³åœ¢ã§ããããšã§ãã ããŠã誰ãå¿ èŠãšããªããèª å®ãªããµãŒã¯ã«ãäœããŸãããã ããã§ããèšç®ã«ã¯ã©ã®ååŸãéžæãããŸããïŒ åãåã西ãæ±ïŒ
ãšããã§ãåã®äžå¿ã®äœçœ®ã¯å€æŽã§ããŸãããååŸã¯å€æŽã§ããŸããã ãªãã§ïŒ
L.CircleMarker
ååŸããã¯ã»ã«ã§æå®ãããåºå®ãµã€ãºã®åã Circeãæ¡åŒµããŸãïŒããã§ã¯ã¿ã€ããã¹ãå¿ããŠããŸãïŒ ã MapïŒaddLayerã䜿çšããŠããããã«è¿œå ããŸãã
ãã€ã³ããã©ã³ã¯ãµãŒã¯ã«ã ããšéãã¯ãããŸããã ãCircleMarkerããšããååã§ã¯ãããã¯å+ããŒã«ãŒã ãšæããŸããã説æã«ã¯ãã³ãããããŸããã
ããã©ã«ãã®ååŸã¯10ã§ããã¹ãªãã·ã§ã³ãªããžã§ã¯ãã«ãååŸãã¡ã³ããŒãæž¡ãããšã§å€æŽã§ããŸãã
ãªããããè¡ãããã®ã§ããïŒ çœ²åã®ååŸã¯èª°ã«å¹²æžããŸãããïŒ ãããšããååŸã®å€æŽãå©çšå¯èœã«ãããããªæ¹æ³ã§ããïŒ ã§ã¯ããªããµãŒã¯ã«ãå¿ èŠãªã®ã§ããïŒ è¯ãæ¹æ³ã§ã¯ãè¿œå ã®ãã£ãŒã«ãããªãã·ã§ã³ã«è¡šç€ºããããããCircle-> CircleMarkerã§ã¯ãªããOptions-> CircleOptionsãå±éããå¿ èŠããããŸãã
ã°ã«ãŒã
ã¬ã€ã€ãŒã ãã§ãªãããŒã«ãŒ/ã°ã©ãã£ãã¯ãé 眮ã§ããLayerGroupã¯éåžžã«å¥åŠã§ãã ILayerãªã³ã¯ã¯ãŸã ã©ãã«ãã€ãªãããŸããã ã°ã«ãŒãã®ãã¹ãŠã®åãåé€ããclearLayersã¡ãœããïŒããã³ååããç§ãå人çã«èããããã«ãã¿ã€ã«ã¬ã€ã€ãŒãã¯ãªã¢ããªãïŒãéåžžã«å¥åŠã§ãã
ããããã€ãã³ãã®ãããã¬ã³ããšãããã¢ãããLayerGroupã«è¿œå ããFeatureGroupã¯ããã§ã«ããªãå¥åŠã§ãã ãã£ãŒãã£ãŒãšããååã¯èª°ãèšãã¹ãã§ããïŒ ãã®æ©èœãåºæ¬ã°ã«ãŒãã«è¿œå ã§ãããã¬ã€ã€ãŒ/æ©èœã®åå²ãã§ããªãã®ã¯ãªãã§ããïŒ
ãžãªãœã³
ãŸããã环ç©ãGeoJSONã®ãŸãã«ãã®è§£æ±ºçã¯ãã©ããå¥åŠã«èŠããŸãã ãŸãã¯ãaddGeoJSONã2ååŒã³åºãããšã¯ã§ããŸãããïŒ ããã¥ã¡ã³ãã«ã¯çãããããŸããã
var geojson = new L.GeoJSON(); geojson.on('featureparse', function(e) { // do something with e.layer depending on e.properties }); geojson.addGeoJSON(geojsonObj); map.addLayer(geojson);
æãèå³æ·±ããé ããŠããã®ã¯ãäœãããããããšã§ãã ãããŠãäœãã§ããŸããïŒ ãã®ã°ã«ãŒãã¯ãåãªããžã§ã¯ããžã®ã¢ã¯ã»ãµãŒãæäŸããŸããã geojsonçµç±ã§FeatureCollectionãè¿œå ããå Žå-ããã§äœãã§ããŸããïŒ ãŸãã¯FeatureCollectionãè¿œå ã§ããã环ç©addGeoJSONã§ããïŒ
ãšããã§ãJSONãã©ãã§ã倧ãããgeojsonã§å°ããã®ã¯ãªãã§ããïŒ ãŸããã¿ã€ããã¹ããããŸããcoordsToLatlngããã³coordsToLatlngsã§ã¯ã倧ããªãLngãã§ããå¿ èŠããããŸãã
æåŸã«
æåŸã«äœããããŸããïŒ
æ©èœã®åŒ±ãã¯ãããšãã°ãã©ã€ãã©ãªã®ãµã€ãºãå°ããããšã«èµ·å ãããšç°¡åã«èããããŸãïŒ25Kbã¯ã¬ã³ãŒãã§ãïŒã ïŒãã ããã©ã€ãã©ãªã®ééã1ã€ã®æšæºã¿ã€ã«æªæºã®å Žåãäœãç¯çŽã§ããŸããïŒïŒ
ç°ãªããšã³ãã£ãã£ããããã«è¿œå ããããã®äžè²«æ§ã®ãªãã€ã³ã¿ãŒãã§ã€ã¹-æé·ç ã ãšæããŸãã çµå±ã®ãšãããåäžã®ã€ã³ã¿ãŒãã§ã€ã¹ã§ãªãªãŒã¹ããã«ã¯ãããããæžããå¿ èŠããããšæããŸãã
èŠèŠçããã³çŸçã«ãã©ã€ãã©ãªïŒããã³Cloud Maidåºæ¿ïŒã¯éåžžã«å¿«é©ãªå°è±¡ãæ®ããããã«å¯ŸããŠå€ãã®ããšãèš±ãããŸãã ããŠãèè ã¯ããã¡ã€ã«ãšã®äžæŽåãšäžæŽåãæçµæ±ºå®ããããšãæãã§ããŸãããããŸã§ã®ãšããããŒãžã§ã³ã¯ããã0.3ãªã®ã§ãåŸæ¹äºææ§ãåŒãè£ãäœè£ããããŸãã