この記事はWordPress上にLeafletで地図を載せる(その③)~表示サンプルの続きで、前回の新潟県より山梨県へ至る道で地図を載せたときのサンプルコードを載せます。
サンプルコードを載せる前に、実際にはこんな感じで地図を載せるためのHTMLを書いています。百聞は一見にしかずということで、実際の投稿画面のスクリーンショットを。
こんな感じで、テキストモードの投稿画面、「<div>」タグの中身をゴリゴリ書いています。
<div id="leafletmap"><script> //切り替え可能とするタイルレイヤを生成(タイルURL,ズーム範囲,著作権表示などをオプションで設定) var std = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "地理院タイル" }) var pal = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 18, attribution: "地理院タイル" }) var blk = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', { minZoom: 5, maxZoom: 14, attribution: "地理院タイル" }) var ort = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', { minZoom: 5, maxZoom: 18, attribution: "地理院タイル" }) var rapid = L.tileLayer('https://aginfo.cgk.affrc.go.jp/ws/tmc/1.0.0/Kanto_Rapid-900913/{z}/{x}/{y}.png', { tms: true, opacity: 1.0, minZoom: 8, maxZoom: 16, attribution: "迅速測図(農業環境技術研究所)" }) // var gsPoints = { "type": "FeatureCollection", "name": "Point", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4612" } }, "features": [ { "type": "Feature", "properties": { "fid": 1 }, "geometry": { "type": "Point", "coordinates": [ 139.219362281527879, 36.129313809028154 ] } }, { "type": "Feature", "properties": { "fid": 2 }, "geometry": { "type": "Point", "coordinates": [ 139.201853635282816, 36.15032687899587 ] } }, { "type": "Feature", "properties": { "fid": 3 }, "geometry": { "type": "Point", "coordinates": [ 139.167413884943159, 36.167432662971983 ] } }, { "type": "Feature", "properties": { "fid": 4 }, "geometry": { "type": "Point", "coordinates": [ 139.142397190742258, 36.183381608867897 ] } }, { "type": "Feature", "properties": { "fid": 5 }, "geometry": { "type": "Point", "coordinates": [ 139.122517581984823, 36.203865105851413 ] } }, { "type": "Feature", "properties": { "fid": 6 }, "geometry": { "type": "Point", "coordinates": [ 139.096254612617201, 36.230914731623166 ] } }, { "type": "Feature", "properties": { "fid": 7 }, "geometry": { "type": "Point", "coordinates": [ 139.084490990921267, 36.253199731730419 ] } }, { "type": "Feature", "properties": { "fid": 8 }, "geometry": { "type": "Point", "coordinates": [ 139.118930741260925, 36.279864732582872 ] } }, { "type": "Feature", "properties": { "fid": 9 }, "geometry": { "type": "Point", "coordinates": [ 139.099780659430365, 36.326531060615395 ] } }, { "type": "Feature", "properties": { "fid": 10 }, "geometry": { "type": "Point", "coordinates": [ 139.080265814136425, 36.366487560211212 ] } }, { "type": "Feature", "properties": { "fid": 11 }, "geometry": { "type": "Point", "coordinates": [ 139.245503663074373, 36.109338813077663 ] } }, { "type": "Feature", "properties": { "fid": 12 }, "geometry": { "type": "Point", "coordinates": [ 139.274502358417806, 36.095167850097489 ] } } ] }; var gsLines = { "type": "FeatureCollection", "name": "Line", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4612" } }, "features": [ { "type": "Feature", "properties": { "fid": 1 }, "geometry": { "type": "LineString", "coordinates": [ [ 139.280095398190582, 36.088892023161357 ], [ 139.280004207324708, 36.09026758975417 ], [ 139.279943413414145, 36.090857110924652 ], [ 139.279441863651925, 36.091336093619908 ], [ 139.278879519979114, 36.091974732672938 ], [ 139.278545153470958, 36.092158954512342 ], [ 139.277770031111174, 36.092294050253471 ], [ 139.276280580302114, 36.093153744983482 ], [ 139.275748633584612, 36.093890618695951 ], [ 139.275703038151676, 36.094209928492376 ], [ 139.274806327970708, 36.094725733884495 ], [ 139.274578350806081, 36.095204693002955 ], [ 139.274076801043833, 36.095511716543534 ], [ 139.273772831490987, 36.096813483030473 ], [ 139.273453663460486, 36.097218745553917 ], [ 139.272830525877083, 36.097452077573848 ], [ 139.272830525877083, 36.098029264330599 ], [ 139.272632945667709, 36.09853276420926 ], [ 139.272678541100646, 36.09920818580887 ], [ 139.272610147951269, 36.10003710438243 ], [ 139.272777331205333, 36.100313408630321 ], [ 139.272146594383145, 36.100780053598299 ], [ 139.27109789942574, 36.101387915913214 ], [ 139.270064402946019, 36.101983493620061 ], [ 139.269198089720334, 36.102486968160008 ], [ 139.268422967360522, 36.102800103136751 ], [ 139.267176692193772, 36.103530746562221 ], [ 139.265535256608302, 36.104353479764583 ], [ 139.263947015694583, 36.105176204350791 ], [ 139.261940816645648, 36.105108667582535 ], [ 139.261302480584646, 36.105096388163908 ], [ 139.260086602373178, 36.105452490525529 ], [ 139.259174693714584, 36.105661239435307 ], [ 139.257822029204334, 36.106852325543251 ], [ 139.256560555559929, 36.107822372019122 ] ] } }, { "type": "Feature", "properties": { "fid": 2 }, "geometry": { "type": "LineString", "coordinates": [ [ 139.256560555559929, 36.107822372019122 ], [ 139.256210990574147, 36.108497713758183 ], [ 139.255481463647271, 36.108829243032503 ], [ 139.252760936149087, 36.108522271530198 ], [ 139.250010011695679, 36.108153904143848 ], [ 139.24741107201865, 36.108608223671773 ], [ 139.246104002941337, 36.108939752479635 ], [ 139.245070506461587, 36.109553691021418 ], [ 139.244021811504211, 36.110462311256526 ], [ 139.242912322636244, 36.111604210970235 ], [ 139.242023211694118, 36.111684020544544 ], [ 139.240237390571053, 36.111714716513077 ], [ 139.236483366593149, 36.111641046168458 ], [ 139.236194595517929, 36.112506668353291 ], [ 139.236065408457961, 36.113630121217376 ], [ 139.236035011502679, 36.114090548076021 ], [ 139.23624779018968, 36.114507999427929 ], [ 139.236939320922431, 36.114857920175027 ], [ 139.237494065356429, 36.11571122914377 ], [ 139.237691645565803, 36.116245309895426 ], [ 139.238390775537425, 36.11659522290109 ], [ 139.238922722254927, 36.116877607698576 ], [ 139.241118902274394, 36.117614258912027 ], [ 139.241658448230709, 36.118160604098499 ], [ 139.242030810932988, 36.118872688747615 ], [ 139.241681245947206, 36.119020015799769 ], [ 139.241574856603705, 36.119308530476175 ], [ 139.240997314453182, 36.119161203965369 ], [ 139.239743440047619, 36.119191897011248 ], [ 139.239447069733558, 36.118897243275505 ], [ 139.238641550418464, 36.118866550114447 ], [ 139.238413573253808, 36.119013877178119 ], [ 139.238185596089153, 36.118780609199639 ], [ 139.237000114832995, 36.118958629561639 ], [ 139.23658975593662, 36.119351500656414 ], [ 139.236308584100243, 36.119830309645316 ], [ 139.235381476963965, 36.120315254234711 ], [ 139.234195995707807, 36.122463706890549 ], [ 139.233709644423186, 36.123642261660684 ], [ 139.233101705317466, 36.124225394196735 ], [ 139.231619853747247, 36.124747140688896 ], [ 139.229651650892436, 36.125090877659453 ], [ 139.227371879245936, 36.125354817525952 ], [ 139.223579859073908, 36.125821313724266 ], [ 139.222531164116532, 36.126011594272306 ], [ 139.221870030339062, 36.126134355671411 ], [ 139.221649652413248, 36.126109803406948 ], [ 139.221102507218063, 36.126864782026537 ], [ 139.219514266304373, 36.129105122988683 ], [ 139.218457972108126, 36.130486123229957 ], [ 139.217584059643627, 36.131646144653999 ], [ 139.216953322821411, 36.132480858457072 ], [ 139.216504967730941, 36.132935037237971 ], [ 139.215319486474783, 36.133462863329569 ], [ 139.214080810546847, 36.133806562131873 ], [ 139.213723646322251, 36.133947723703876 ], [ 139.212781340708375, 36.1364947258337 ], [ 139.211953023676784, 36.139188934490697 ], [ 139.211869432049724, 36.139741266523956 ], [ 139.211497069347473, 36.140244498991244 ], [ 139.210045614732564, 36.142189891707325 ], [ 139.20879174032703, 36.143619755278785 ], [ 139.206747545083942, 36.145810525729779 ], [ 139.206170002933504, 36.14703782137142 ], [ 139.202643956120255, 36.149860528470889 ], [ 139.20066815402663, 36.151235027323168 ], [ 139.200500970772566, 36.151351613171073 ], [ 139.20059216163844, 36.151781138483656 ], [ 139.199087512351724, 36.152333381857375 ], [ 139.197126908735783, 36.152787445718026 ], [ 139.194961125671597, 36.153867370824209 ] ] } }, { "type": "Feature", "properties": { "fid": 3 }, "geometry": { "type": "LineString", "coordinates": [ [ 139.194961125671597, 36.153867370824209 ], [ 139.193243697697881, 36.154677304894093 ], [ 139.191647857545348, 36.155879918837599 ], [ 139.18904891786832, 36.156640746704781 ], [ 139.188243398553226, 36.156726646161481 ], [ 139.183835840036636, 36.158370989046155 ], [ 139.182619961825196, 36.158677765618002 ], [ 139.181145709493791, 36.15889864400647 ], [ 139.180613762776261, 36.159082708854861 ], [ 139.179853838894132, 36.15904589591976 ], [ 139.178911533280228, 36.159328127980515 ], [ 139.178425181995635, 36.159892589054081 ], [ 139.177604464202915, 36.161021499009294 ], [ 139.176753349454913, 36.161524594948453 ], [ 139.175978227095072, 36.162285368040983 ], [ 139.174351989987258, 36.162346720388022 ], [ 139.173424882851009, 36.163168837205845 ], [ 139.172269798550104, 36.163463324714883 ], [ 139.171373088369165, 36.163487865290683 ], [ 139.170765149263445, 36.163610568054516 ], [ 139.169534072574351, 36.164997095938133 ], [ 139.168804545647447, 36.165794645113962 ], [ 139.168196606541699, 36.166739423637104 ], [ 139.167740652212416, 36.167230213180581 ], [ 139.165977628805791, 36.168518521110506 ], [ 139.165460880565917, 36.168776180155326 ], [ 139.165354491222416, 36.169033838353094 ], [ 139.165202506445979, 36.170015385632169 ], [ 139.16430579626504, 36.170739268874243 ], [ 139.16406262062273, 36.171217764295783 ], [ 139.163956231279201, 36.172677770729365 ], [ 139.161281299214011, 36.17265323303085 ], [ 139.159396687986259, 36.172542813292473 ], [ 139.157952832610135, 36.173107179209609 ], [ 139.156706557443414, 36.173892377202442 ], [ 139.156326595502293, 36.174530344778219 ], [ 139.155293099022572, 36.175094696380938 ], [ 139.154365991886323, 36.175904411146021 ], [ 139.1533476938842, 36.17621111909925 ], [ 139.152724556300853, 36.176984017816551 ], [ 139.151964632418668, 36.179327203838881 ], [ 139.151463082656448, 36.180284086878125 ], [ 139.148864142979448, 36.180836129468958 ], [ 139.147496279991543, 36.181142818116285 ], [ 139.147146715005761, 36.181437238088158 ], [ 139.144927737269825, 36.18208741160614 ], [ 139.143362294072574, 36.182663976060425 ], [ 139.142511179324543, 36.183228269076722 ], [ 139.141462484367167, 36.184123769214857 ], [ 139.140474583320326, 36.184712585644611 ], [ 139.139501880751141, 36.184994725281953 ], [ 139.138118819285609, 36.185681669714619 ], [ 139.13655337608833, 36.186883807974894 ], [ 139.133240107962109, 36.188981372385932 ], [ 139.132282603870578, 36.189741878938854 ], [ 139.132161016049423, 36.190085331090408 ], [ 139.132085023661205, 36.196070969550249 ], [ 139.132115420616515, 36.200093846474978 ], [ 139.128665366191456, 36.200719336207747 ], [ 139.128437389026828, 36.201357085299392 ], [ 139.12700873212836, 36.20238728439508 ], [ 139.125412891975827, 36.20266936035452 ], [ 139.122190814715452, 36.20400614129543 ], [ 139.120731760861673, 36.205477800333178 ], [ 139.120017432412425, 36.20637304604476 ], [ 139.11807202727411, 36.207525813111424 ], [ 139.115807454105266, 36.208825721562292 ], [ 139.115868248015801, 36.20924266875609 ], [ 139.115047530223109, 36.210787806633483 ], [ 139.114667568281988, 36.211167954926943 ], [ 139.114469988072642, 36.21168299160442 ], [ 139.114166018519768, 36.212148974248784 ], [ 139.113998835265704, 36.21316676879583 ], [ 139.112509384456672, 36.214503370441477 ], [ 139.11184065144036, 36.216121976729347 ], [ 139.111293506245204, 36.21686995771649 ], [ 139.109576078271516, 36.218623393310615 ], [ 139.108132222895364, 36.220536187319446 ], [ 139.107053130982706, 36.221235081155953 ], [ 139.106673169041642, 36.221860401927309 ], [ 139.106369199488768, 36.221995274379474 ], [ 139.105533283218392, 36.223515638663017 ], [ 139.104036233170575, 36.224140941203004 ], [ 139.103732263617673, 36.224343243895639 ], [ 139.103641072751827, 36.224471981700347 ], [ 139.1029799389743, 36.224680413887256 ], [ 139.102698767137923, 36.224760108400176 ], [ 139.102774759526142, 36.225526397649347 ], [ 139.101938843255738, 36.226084251500417 ], [ 139.100289808431455, 36.227770049396668 ], [ 139.099142323369364, 36.22917996154986 ], [ 139.097911246680269, 36.230295613151263 ], [ 139.095996238497207, 36.231227353939488 ], [ 139.096079830124268, 36.23252073886804 ], [ 139.095532684929083, 36.233562786992486 ], [ 139.094483989971707, 36.234188009201127 ], [ 139.094514386926988, 36.235505863167184 ], [ 139.094210417374114, 36.236069775287284 ], [ 139.093845653910677, 36.237675676648458 ], [ 139.093792459238927, 36.238423451521854 ], [ 139.093024936117956, 36.238423451521854 ], [ 139.092903348296772, 36.239122185512777 ], [ 139.092211817563992, 36.240948671180767 ] ] } }, { "type": "Feature", "properties": { "fid": 4 }, "geometry": { "type": "LineString", "coordinates": [ [ 139.092211817563992, 36.240948671180767 ], [ 139.091520286831241, 36.241310285765259 ], [ 139.091041534785489, 36.241445124673675 ], [ 139.09061597741146, 36.241512544040638 ], [ 139.08918732051302, 36.24135318907954 ], [ 139.087051934404116, 36.241236737171747 ], [ 139.085767663043242, 36.24245028011552 ], [ 139.08536490338571, 36.242756727374214 ], [ 139.084027437353086, 36.243265427171053 ], [ 139.081694471034837, 36.243645417630148 ], [ 139.082013639065337, 36.246930419415207 ], [ 139.082325207857082, 36.246936548020834 ], [ 139.082393601006459, 36.24762294881026 ], [ 139.082127627647736, 36.24853609765804 ], [ 139.082104829931239, 36.24906927359487 ], [ 139.082256814707677, 36.249443107427034 ], [ 139.08340429976974, 36.251097760289419 ], [ 139.083685471606145, 36.25163704698479 ], [ 139.084133826696615, 36.252188586346094 ], [ 139.084483391682397, 36.253322293918082 ], [ 139.085684071416239, 36.254817537127352 ], [ 139.086755564090083, 36.256325007459651 ], [ 139.08696074353827, 36.256625272466529 ], [ 139.087295110046426, 36.257918237168703 ], [ 139.087819457525143, 36.258573903034396 ], [ 139.089194919751833, 36.25892318073489 ], [ 139.091368302054889, 36.259940366544818 ], [ 139.092097828981736, 36.260516357454868 ], [ 139.09375446304486, 36.261141364063 ], [ 139.094727165614046, 36.261631561824892 ], [ 139.095563081884421, 36.262526164809984 ], [ 139.097630074843892, 36.263812904559948 ], [ 139.099104327175297, 36.26460944711507 ], [ 139.099469090638735, 36.265038351279834 ], [ 139.099970640400983, 36.26594516947344 ], [ 139.10136890034417, 36.266325049641367 ], [ 139.103724664378859, 36.266851977137598 ], [ 139.104773359336235, 36.267746520327009 ], [ 139.105274909098455, 36.26875133744317 ], [ 139.106262810145267, 36.270037974628451 ], [ 139.10717471880389, 36.270834453690448 ], [ 139.108117024417766, 36.271153043040407 ], [ 139.108968139165796, 36.271802471151148 ], [ 139.10998643716789, 36.272868501810741 ], [ 139.110959139737048, 36.273787482076543 ], [ 139.112524582934327, 36.274755462925533 ], [ 139.113968438310451, 36.274939255401875 ], [ 139.114713163714953, 36.275319091815234 ], [ 139.115457889119483, 36.27556414658504 ], [ 139.116065828225203, 36.276581115659638 ], [ 139.117160118615544, 36.277720595390399 ], [ 139.11820881357292, 36.278602761823322 ], [ 139.118968737455077, 36.280011756975448 ], [ 139.120777356294639, 36.279717707913321 ], [ 139.121157318235703, 36.280661111396839 ], [ 139.120610173040546, 36.282057817694785 ], [ 139.121461287788577, 36.284152830278472 ], [ 139.122054028416642, 36.284544873170361 ], [ 139.122342799491889, 36.285181938669318 ], [ 139.121066127369858, 36.287031849391433 ], [ 139.120412592831201, 36.288097672081207 ], [ 139.119774256770171, 36.289763756546101 ], [ 139.119470287217297, 36.290645786860864 ], [ 139.119394294829078, 36.292899819032691 ], [ 139.119333500918515, 36.296072503974592 ], [ 139.118148019662357, 36.298118143606267 ], [ 139.117874447064764, 36.299441043666178 ], [ 139.117646469900109, 36.301241621584474 ], [ 139.11735769882489, 36.302674704913684 ] ] } }, { "type": "Feature", "properties": { "fid": 5 }, "geometry": { "type": "LineString", "coordinates": [ [ 139.11735769882489, 36.302674704913684 ], [ 139.112858949442483, 36.302821686330383 ], [ 139.10781305486492, 36.302944170632678 ], [ 139.108041032029575, 36.303838300211929 ], [ 139.107524283789672, 36.305357072166231 ], [ 139.10770666552142, 36.306704345109978 ], [ 139.106202016234704, 36.308529250433182 ], [ 139.105609275606639, 36.309851973902759 ], [ 139.104879748679764, 36.311076697848918 ], [ 139.103025534407266, 36.312840266534153 ], [ 139.102402396823891, 36.3137342826439 ], [ 139.102204816614545, 36.314432342889411 ], [ 139.1022200150922, 36.315179382894833 ], [ 139.101612075986452, 36.316550978692483 ], [ 139.101612075986452, 36.317689874720529 ], [ 139.102235213569827, 36.31897570507553 ], [ 139.101612075986452, 36.319759438887175 ], [ 139.101034533836014, 36.320102319951694 ], [ 139.100244212998575, 36.321130954094819 ], [ 139.100061831266828, 36.321596284128326 ], [ 139.099727464758701, 36.322269783203481 ], [ 139.099773060191609, 36.323298388740383 ], [ 139.099742663236299, 36.325661680983401 ], [ 139.099803457146891, 36.326910645863393 ], [ 139.099636273892827, 36.330081947125841 ], [ 139.099681869325735, 36.331355329072636 ], [ 139.099362701295235, 36.332628690207088 ], [ 139.099484289116361, 36.333436773978192 ], [ 139.099271510429389, 36.333791838439069 ], [ 139.097402097679236, 36.333889786971071 ], [ 139.097417296156891, 36.335652839487793 ], [ 139.096809357051171, 36.337183234667322 ], [ 139.096049433168986, 36.337501553087186 ], [ 139.09585185295964, 36.338260614838802 ], [ 139.094787959524581, 36.339191067539751 ], [ 139.094058432597734, 36.339362465509147 ], [ 139.093465691969641, 36.339533863101359 ], [ 139.093237714804985, 36.340329632695784 ], [ 139.092128225937017, 36.340501028159615 ], [ 139.091778660951235, 36.341198848654031 ], [ 139.091413897487797, 36.341345757435107 ], [ 139.091246714233733, 36.342104781722632 ], [ 139.090912347725549, 36.342459806672657 ], [ 139.091581080741889, 36.345287706241493 ], [ 139.090836355337331, 36.346891361230952 ], [ 139.090714767516175, 36.347907400353833 ], [ 139.090228416231611, 36.348127744438287 ], [ 139.089863652768173, 36.348715325614961 ], [ 139.08916452279658, 36.348862220216297 ], [ 139.089179721274206, 36.349890474665614 ], [ 139.088267812615641, 36.351800054042776 ], [ 139.087781461331048, 36.352473292014466 ], [ 139.088267812615641, 36.354162481658093 ], [ 139.087903049152203, 36.356806357080337 ], [ 139.087538285688765, 36.358422014519775 ], [ 139.086307208999642, 36.359597017047307 ], [ 139.085866453147986, 36.359719412123773 ], [ 139.085440895773985, 36.360306905811512 ], [ 139.085197720131674, 36.360429299771589 ], [ 139.083997040397861, 36.36281594352036 ], [ 139.083176322605112, 36.362669075249322 ], [ 139.082477192633547, 36.363244307727705 ], [ 139.081504490064361, 36.363856252504966 ], [ 139.081458894631425, 36.364627296072605 ], [ 139.081170123556234, 36.36543504780628 ], [ 139.079756665135392, 36.367099479483215 ], [ 139.079239916895517, 36.367197386120139 ], [ 139.079072733641453, 36.3677358704211 ], [ 139.078100031072296, 36.368641494704569 ], [ 139.077887252385267, 36.369669487873701 ], [ 139.076078633545706, 36.369742915437442 ], [ 139.075440297484704, 36.369865294556384 ], [ 139.074057236019144, 36.369889770357069 ], [ 139.07378366342158, 36.373169458000653 ], [ 139.073479693868677, 36.373512103956074 ], [ 139.073327709092268, 36.374784775719434 ], [ 139.072902151718267, 36.375567947993567 ], [ 139.073008541061768, 36.37649795482735 ], [ 139.072628579120675, 36.378333461999311 ], [ 139.0721118308808, 36.378994233977259 ], [ 139.071458296342144, 36.380499304747836 ], [ 139.071108731356333, 36.380597194520846 ], [ 139.070971945057579, 36.382408133096213 ], [ 139.070880754191734, 36.382457076796761 ], [ 139.070698372460015, 36.384243500784407 ], [ 139.070835158758769, 36.384659511438024 ], [ 139.070637578549423, 36.387351291284837 ] ] } } ] }; var stLine = { "color": "#ff0000", "weight": 5, "opacity": 1 }; // //地図を生成(初期表示の中心座標,ズームレベル,レイヤなどをオプションで設定) var map = L.map('leafletmap', {center: [36.2,139.2], zoom: 11,layers: [rapid]}); // //GeoJsonを追加 var lyGJLn = L.geoJSON(gsLines,{style:stLine}).addTo(map); var lyGJPt = L.geoJSON(gsPoints).addTo(map); // //レイヤコントロールに切り替え可能とするレイヤを追加 L.control.layers({ '地理院タイル(標準地図)': std, '地理院タイル(淡色地図)': pal, '地理院タイル(写真)': ort, '明治期迅速測図': rapid }, { '新潟県より山梨県へ至る道(トレース)': lyGJLn, '新潟県より山梨県へ至る道(記載箇所)': lyGJPt, }, {collapsed: true}).addTo(map); // // //スケールコントロールを追加(オプションはフィート単位を非表示) L.control.scale({imperial: false}).addTo(map); </script> </div>
コードを書くのに先だって、Leaflet関連のJavaScriptやらCSSを読み込むために、記事のカテゴリを設定します。
次に、これはWordPressに書き込む時の特有ですが、空行があると「<P>」が勝手に挿入されてしまうので、Leaflet関連の「<div id=”leafletmap”></div>」の間には空行が無いようにします。ソースが読みやすいように行を開けたい場合はコメントの「//」を入れておくようにしてください。
GeoJSONを表示するのにあたってハマったのが測地系周り。GooJSONではサンプルの28行目にあるように測地系を定義しています。最初はEPSG:3857でGeoJSONを吐き出したのですが、何も表示されませんでした。緯度経度の座標系、とくに世界測地系でないとダメなようです。
ちなみに、25~43行目がポイント、44~55行目がラインで、それぞれQGISから出力したGeoJSONをテキストエディタで開いてコピペしています。(それぞれ先頭行のイコールの後)
あと、本当はGeoJSONファイルを外に置きたかったのですが、面倒くさそうな雰囲気だったのでとりあえずはBlog記事の中に埋め込んでしまいました。
2021/5/19追記 GeoJSONファイルを外に置く方法を記事に書きました。
WordPress上にLeafletで地図を載せる(その⑤)~GeoJSONファイルを読み取る
そして、上記のコードを貼り付けて表示した地図が下記の通りと言うことになります。
関連項目
WordPress上にLeafletで地図を載せる(その①)
WordPress上にLeafletで地図を載せる(その②)
WordPress上にLeafletで地図を載せる(その③)~表示サンプル
本記事の作成にあたって参考にしたサイト。
Using GeoJSON with Leaflet
https://leafletjs.com/examples/geojson/