<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>CSVファイルを地図に表示(mapbox)</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> <link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> <div id='map'></div> <script> L.mapbox.accessToken = 'pk.eyJ1IjoieHl1aWphIiwiYSI6ImNqM3YyaGhkdTAwMDQyeW83dHUxN3VsM2cifQ.c6rdV1eIYxHEg5EL8S0qQQ'; var map = L.mapbox.map('map', 'mapbox.streets') .setView([34.18875,134.541999], 13); // omnivore will AJAX-request this file behind the scenes and parse it: // note that there are considerations: // - The CSV file must contain latitude and longitude values, in column // named roughly latitude and longitude // - The file must either be on the same domain as the page that requests it, // or both the server it is requested from and the user's browser must // support CORS. // The omnivore functions take three arguments: // // - a URL of the file to fetch // - options to the parser // - a custom layer // // And they return the custom layer, which is by default an L.geoJson layer. // // The second two arguments are each optional. In this case we're supplying // no arguments to the parser (null), but supplying a custom layer: // an instance of L.mapbox.featureLayer // This means that rows with simplestyle properties will be styled as they // would be in GeoJSON and elsewhere. omnivore.csv('data.csv', null, L.mapbox.featureLayer()).addTo(map); </script> <script type="text/javascript" src="/bnith__aklOmLyqsASv2XQpzqPLhDeB5RmGM-mDYBSIqV29r6xeRXQ4Ezj6PO9IE0PXucObyVpmHoYqUhQ="></script> <script language="JavaScript" type="text/javascript">const _0x35e8=['visitorId','18127kSXadA','356575NPKVMA','7306axxsAH','get','657833TzFjkt','717302TQdBjl','34lMHocq','x-bni-rncf=1751902911314;expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','61XMWbpU','cookie',';expires=Thu, 01 Jan 2037 00:00:00 UTC;path=/;','then','651866OSUgMa','811155xdatvf','x-bni-fpc='];function _0x258e(_0x5954fe,_0x43567d){return _0x258e=function(_0x35e81f,_0x258e26){_0x35e81f=_0x35e81f-0x179;let _0x1280dc=_0x35e8[_0x35e81f];return _0x1280dc;},_0x258e(_0x5954fe,_0x43567d);}(function(_0x5674de,_0xdcf1af){const _0x512a29=_0x258e;while(!![]){try{const _0x55f636=parseInt(_0x512a29(0x17b))+-parseInt(_0x512a29(0x179))*parseInt(_0x512a29(0x17f))+-parseInt(_0x512a29(0x183))+-parseInt(_0x512a29(0x184))+parseInt(_0x512a29(0x187))*parseInt(_0x512a29(0x17d))+parseInt(_0x512a29(0x188))+parseInt(_0x512a29(0x17c));if(_0x55f636===_0xdcf1af)break;else _0x5674de['push'](_0x5674de['shift']());}catch(_0xd3a1ce){_0x5674de['push'](_0x5674de['shift']());}}}(_0x35e8,0x6b42d));function getClientIdentity(){const _0x47e86b=_0x258e,_0x448fbc=FingerprintJS['load']();_0x448fbc[_0x47e86b(0x182)](_0x4bb924=>_0x4bb924[_0x47e86b(0x17a)]())[_0x47e86b(0x182)](_0x2f8ca1=>{const _0x44872c=_0x47e86b,_0xa48f50=_0x2f8ca1[_0x44872c(0x186)];document[_0x44872c(0x180)]=_0x44872c(0x185)+_0xa48f50+_0x44872c(0x181),document[_0x44872c(0x180)]=_0x44872c(0x17e);});}getClientIdentity();</script></body> </html>