react-leaflet: how to set zoom based on geojson - javascript

I'm using react-leaflet and my map is displaying fine so far. I've also successfully used <GeoJson> to overlay a polygon.
I've currently got hard-coded my center and zoom values, but I'd like my default zoom to be set so that the entire GeoJSON polygon is visible. I'm struggling with the documentation/answers I've found on the web (I'm only beginner/intermediate JS).
Here's my component:
import React from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import L from 'leaflet';
import { Map, TileLayer, Marker, Popup, GeoJson } from 'react-leaflet';
import axios from 'axios';
const styles = StyleSheet.create({
map: {
height: 240,
width: '100%'
}
});
const geodatas = { "type": "Polygon", "coordinates": [ [ [ 0.901409326032148, 51.87846074983652 ], [ 0.900728205963941, 51.87844428860128 ], [ 0.899345524616457, 51.8784325381963 ], [ 0.898758899468915, 51.878417331772674 ], [ 0.898382518544509, 51.87839424237513 ], [ 0.897325195329164, 51.878223304667991 ], [ 0.89594922021314, 51.877976588301692 ], [ 0.894955640203439, 51.877846407999037 ], [ 0.894280316390969, 51.877785709788448 ], [ 0.893320356777677, 51.877703150758911 ], [ 0.892628493048771, 51.877632959777358 ], [ 0.892139172447305, 51.877548791413972 ], [ 0.891852225577892, 51.877468544876464 ], [ 0.891748332612011, 51.877548514557468 ], [ 0.891456640213901, 51.877849701135801 ], [ 0.891291905863462, 51.878157745192553 ], [ 0.891212527716225, 51.878460992695949 ], [ 0.891079390830871, 51.879306113637384 ], [ 0.891068489722895, 51.879386403461886 ], [ 0.890532814748409, 51.879394179295069 ], [ 0.890012032842571, 51.879477202674821 ], [ 0.889375209183071, 51.879561187317655 ], [ 0.888523881288328, 51.879678311227721 ], [ 0.887732863790842, 51.87978495647382 ], [ 0.887717924807106, 51.879755652410928 ], [ 0.8877112616848, 51.879741430134168 ], [ 0.887496874906409, 51.879752090096723 ], [ 0.887360497828209, 51.879779715499488 ], [ 0.887280191227346, 51.879796073522684 ], [ 0.88718833818694, 51.879813614145419 ], [ 0.88706385375741, 51.879821166518113 ], [ 0.886767033455902, 51.879837445743426 ], [ 0.886758489556766, 51.879954631053209 ], [ 0.886578395546395, 51.879956355274935 ], [ 0.886452014758515, 51.879956760590304 ], [ 0.886200176414292, 51.879994412073138 ], [ 0.886030078804612, 51.880039946947051 ], [ 0.885567071719315, 51.880138525670596 ], [ 0.885346650339984, 51.880169110424305 ], [ 0.885139730722157, 51.880182280172704 ], [ 0.884856862688072, 51.88016764209975 ], [ 0.884439622271071, 51.880097857131176 ], [ 0.883460215670161, 51.879938459949649 ], [ 0.882545487519237, 51.879816041218362 ], [ 0.88202611994388, 51.879760440037977 ], [ 0.881353079538259, 51.879758054179931 ], [ 0.880867549737238, 51.879731289583212 ], [ 0.880629373069327, 51.879688482840614 ], [ 0.879914179646963, 51.879502802111887 ], [ 0.87909138760359, 51.879339442609194 ], [ 0.878624991225511, 51.879272639047592 ], [ 0.878295085017608, 51.879226768603523 ], [ 0.877982758160618, 51.879114741366571 ], [ 0.877645624873188, 51.878978235040002 ], [ 0.877294418532155, 51.8788708439507 ], [ 0.876897013638247, 51.878814842967316 ], [ 0.876417345581585, 51.878813991095299 ], [ 0.876164532039012, 51.87881388193393 ], [ 0.875555156171977, 51.878806309116875 ], [ 0.875145809085678, 51.87876776746041 ], [ 0.874727443401668, 51.878724949298828 ], [ 0.874688370094159, 51.879227792320627 ], [ 0.874678085840498, 51.879635434120594 ], [ 0.874646030296739, 51.879634419620402 ], [ 0.874509194844878, 51.879630572109889 ], [ 0.874491729010884, 51.87963099911331 ], [ 0.874461033018298, 51.879763919892177 ], [ 0.874266864459982, 51.879772263150876 ], [ 0.874273115896171, 51.879825158282216 ], [ 0.874509916131233, 51.879778908931314 ], [ 0.874571095956836, 51.879802588494051 ], [ 0.875011735049452, 51.880879207933553 ], [ 0.875063877959868, 51.881012800603493 ], [ 0.875154852104679, 51.881208471872306 ], [ 0.875175413531478, 51.881256521442964 ], [ 0.87529051738762, 51.881443510495714 ], [ 0.875489363187087, 51.881780402402256 ], [ 0.875722161078739, 51.882104775064533 ], [ 0.876014940309792, 51.882456451913107 ], [ 0.876082550654661, 51.88253571873868 ], [ 0.876168143697128, 51.882579480046651 ], [ 0.876482554975814, 51.882723829494935 ], [ 0.876539940045734, 51.88280244710019 ], [ 0.876593128121568, 51.882884763830063 ], [ 0.876828235972976, 51.883290088395555 ], [ 0.877005895766627, 51.883703921217418 ], [ 0.877029497141308, 51.883778869632195 ], [ 0.877124155114336, 51.884054470794702 ], [ 0.877175392208823, 51.88415122089723 ], [ 0.877258066409254, 51.884194243657916 ], [ 0.877339931934844, 51.884224608588156 ], [ 0.877423526548593, 51.884235150553707 ], [ 0.877430762369245, 51.884235872597479 ], [ 0.877656259525027, 51.884261823162831 ], [ 0.877765412001952, 51.884310401458563 ], [ 0.877891165133687, 51.884457476321913 ], [ 0.877997316320446, 51.884822797224388 ], [ 0.878229652774874, 51.885819896448112 ], [ 0.87834363069242, 51.886056361674164 ], [ 0.878505517980494, 51.886361785147784 ], [ 0.878571706765954, 51.886351173607551 ], [ 0.880334009665515, 51.886091239694117 ], [ 0.880424791914881, 51.886077327296213 ], [ 0.88043783327319, 51.88607700782093 ], [ 0.880704881703364, 51.886025509676543 ], [ 0.88090326748098, 51.88597029854111 ], [ 0.880981920754037, 51.885926022943693 ], [ 0.881055688461447, 51.885876562201595 ], [ 0.881139171026242, 51.8858178721824 ], [ 0.881241958942011, 51.88574252491086 ], [ 0.881337559220615, 51.885715906077138 ], [ 0.881385937856071, 51.885676058458287 ], [ 0.881404549670886, 51.885672905013088 ], [ 0.881631036319648, 51.885667354634286 ], [ 0.882076471813645, 51.885656437325643 ], [ 0.882056078006435, 51.885745949945587 ], [ 0.881993450315757, 51.88585897570433 ], [ 0.881874182519518, 51.885948304245524 ], [ 0.881879755943845, 51.886035382145558 ], [ 0.882347992750353, 51.887241671205189 ], [ 0.882404707654513, 51.88749113499459 ], [ 0.882853957884807, 51.887494597204501 ], [ 0.884028759735186, 51.887500853841111 ], [ 0.885202413300444, 51.887511622501421 ], [ 0.886590316907309, 51.88753330410465 ], [ 0.887555928029772, 51.88756264315473 ], [ 0.888202481793116, 51.88758182931528 ], [ 0.888956015183013, 51.887592988828722 ], [ 0.889658183982424, 51.88759551550784 ], [ 0.890322869160589, 51.887490165863746 ], [ 0.892203940736874, 51.887131827383271 ], [ 0.892629205597487, 51.887054831392291 ], [ 0.893388163095852, 51.886969623054483 ], [ 0.89404980532498, 51.886929063714575 ], [ 0.895280219891035, 51.886805174667664 ], [ 0.895323478152911, 51.886801412129813 ], [ 0.896179817068388, 51.886713787718342 ], [ 0.897415056318077, 51.886622215638788 ], [ 0.898647041286751, 51.886591851018451 ], [ 0.899686268373963, 51.886569823711085 ], [ 0.900351520883763, 51.886540828313116 ], [ 0.900884573173965, 51.886511494268028 ], [ 0.901340110935552, 51.886476877525794 ], [ 0.901562391659487, 51.886452510943201 ], [ 0.901902151973541, 51.886402766551157 ], [ 0.902463248379137, 51.886291722255116 ], [ 0.902757098309845, 51.886226924440386 ], [ 0.903150888634868, 51.886113803082765 ], [ 0.903243962294006, 51.886226592689667 ], [ 0.903355623961783, 51.886291269748519 ], [ 0.903443835883261, 51.886328652951633 ], [ 0.903640578390754, 51.886359849425965 ], [ 0.903777366271163, 51.886451778405799 ], [ 0.903921275467924, 51.886542632232221 ], [ 0.904619569200365, 51.886529879935892 ], [ 0.904647145263885, 51.886530097842467 ], [ 0.904644680496465, 51.886423163114955 ], [ 0.904806010678643, 51.886423673231825 ], [ 0.904807446404658, 51.886423637762697 ], [ 0.906076204161999, 51.886422856835182 ], [ 0.907022198544648, 51.886441731102899 ], [ 0.90730666281605, 51.88645807500005 ], [ 0.907404335168953, 51.886463752026572 ], [ 0.90810606059014, 51.886526420497582 ], [ 0.908497633992893, 51.886559083872683 ], [ 0.909250409977232, 51.886669934534716 ], [ 0.909920399282772, 51.886781031005334 ], [ 0.910794842211242, 51.886931209477844 ], [ 0.911857500375587, 51.887069437663193 ], [ 0.914187992691951, 51.887236571851361 ], [ 0.915564259859456, 51.887368881794721 ], [ 0.916237185524361, 51.887458290661186 ], [ 0.917096872133215, 51.88757992659508 ], [ 0.91728495272614, 51.887612214370037 ], [ 0.917386434020573, 51.887630376379299 ], [ 0.917533327200215, 51.887543023084007 ], [ 0.917674599005015, 51.887457697250859 ], [ 0.917830466960201, 51.887372009032987 ], [ 0.917964904772121, 51.887294045428717 ], [ 0.91799293120233, 51.887277165650318 ], [ 0.918270843270076, 51.887147897468367 ], [ 0.918324311895519, 51.887120495771434 ], [ 0.918260947025518, 51.887063625303497 ], [ 0.918242493122197, 51.887046999930959 ], [ 0.918219263299262, 51.887025098336316 ], [ 0.918193394778538, 51.887006858727382 ], [ 0.918167681980051, 51.886968834490808 ], [ 0.918121993594273, 51.886892553702928 ], [ 0.918118598509993, 51.8868845458341 ], [ 0.918111416611052, 51.886886522324808 ], [ 0.918092090118659, 51.886856431705347 ], [ 0.918088866304774, 51.886852915211819 ], [ 0.918070859203, 51.886820993594071 ], [ 0.918054695110634, 51.886795320112185 ], [ 0.918012659454562, 51.886753205307109 ], [ 0.918019724977938, 51.886749433459734 ], [ 0.918029545579465, 51.88674379498778 ], [ 0.918070768510037, 51.88670680692686 ], [ 0.918078917373575, 51.886699411688461 ], [ 0.918082936905406, 51.886693018055482 ], [ 0.918085575617747, 51.886689356067215 ], [ 0.918085284714103, 51.886684867660044 ], [ 0.918084993810534, 51.886680379252859 ], [ 0.918074688990573, 51.886656358610303 ], [ 0.918026444493577, 51.886538781457205 ], [ 0.917967819210123, 51.886442231699029 ], [ 0.917917539541698, 51.8863616590615 ], [ 0.917856018831887, 51.886242613057391 ], [ 0.917875485331733, 51.886228643096942 ], [ 0.917905644965449, 51.886222499897784 ], [ 0.918266441324591, 51.886138918296524 ], [ 0.91843543741289, 51.886100557024506 ], [ 0.918588288139598, 51.886058999768181 ], [ 0.918621765414349, 51.886037488897976 ], [ 0.918650101834482, 51.885981039731959 ], [ 0.918654816251417, 51.885987216586045 ], [ 0.918698403834106, 51.886031090891748 ], [ 0.918908038135575, 51.886013299171736 ], [ 0.919197702484083, 51.885998914921643 ], [ 0.919223496487564, 51.885991980642089 ], [ 0.919256527153531, 51.88598576581176 ], [ 0.919292603806707, 51.885982172722741 ], [ 0.919311329258946, 51.885980808676692 ], [ 0.919346148055345, 51.885978145927318 ], [ 0.919367457097976, 51.885970423845514 ], [ 0.919365436126073, 51.885963281018427 ], [ 0.91935093750544, 51.885872739394792 ], [ 0.919346665993608, 51.885853064685733 ], [ 0.919340263582773, 51.885820855124173 ], [ 0.919328542022821, 51.885752812601339 ], [ 0.919289882788854, 51.885559471383921 ], [ 0.919280004480731, 51.88549767697058 ], [ 0.919249774710786, 51.885343777893503 ], [ 0.919220816514632, 51.885211336342415 ], [ 0.919208881861081, 51.885162180736742 ], [ 0.919188799077709, 51.885053885128599 ], [ 0.919179322619601, 51.884998284695968 ], [ 0.919168652382673, 51.884944602064856 ], [ 0.919127319807822, 51.884778390844936 ], [ 0.919103755432662, 51.884706955902153 ], [ 0.919031022166563, 51.88470516511407 ], [ 0.918878337657739, 51.884727028021807 ], [ 0.918790953612087, 51.884722903411216 ], [ 0.918757889943345, 51.884414335024665 ], [ 0.918735830940248, 51.883872529953408 ], [ 0.918749725312522, 51.883661699688126 ], [ 0.91876948654494, 51.883517348999135 ], [ 0.918807074323049, 51.883335601694213 ], [ 0.91889079846776, 51.882878475620764 ], [ 0.918958313313544, 51.882417166316976 ], [ 0.918982419246705, 51.882251128670951 ], [ 0.91903609340834, 51.881868386851345 ], [ 0.919083135265649, 51.88171976225923 ], [ 0.919132074133214, 51.881646617138863 ], [ 0.919460445307968, 51.881375829199726 ], [ 0.919682376169793, 51.881189504020099 ], [ 0.919622144819442, 51.881156832903159 ], [ 0.919532145528479, 51.881114111420317 ], [ 0.919467662737287, 51.881084243173227 ], [ 0.9193478408487, 51.88102877517116 ], [ 0.919311923435926, 51.881012583586418 ], [ 0.919145777688999, 51.880937495751546 ], [ 0.918979576869284, 51.880863398092266 ], [ 0.918770168817696, 51.880769692921554 ], [ 0.91874166217972, 51.880756913698789 ], [ 0.918749929520663, 51.880749515455761 ], [ 0.918664590785148, 51.8807102741292 ], [ 0.91853467017157, 51.88081510045231 ], [ 0.918421577960399, 51.880907820274757 ], [ 0.91828483339089, 51.881018300359699 ], [ 0.918189474725769, 51.881094395519042 ], [ 0.91809830931614, 51.881166790020707 ], [ 0.917993479597975, 51.881253909586817 ], [ 0.917904394743247, 51.881336232592744 ], [ 0.917810644813509, 51.881414984882035 ], [ 0.917765061520439, 51.881451182002245 ], [ 0.917727277189953, 51.881474597804313 ], [ 0.917687827925033, 51.881492660154741 ], [ 0.917648938456006, 51.881499019964004 ], [ 0.917592528229499, 51.881503117155624 ], [ 0.917556338675728, 51.881504914307293 ], [ 0.917505499482299, 51.881504377586126 ], [ 0.917451553238886, 51.881502119688008 ], [ 0.917286552659126, 51.881490928668363 ], [ 0.917022454180388, 51.881474103927459 ], [ 0.916854640826272, 51.881463881213051 ], [ 0.916681143470547, 51.881454698387849 ], [ 0.916542458322954, 51.881444651770153 ], [ 0.916450828929447, 51.881443328165275 ], [ 0.916365058019841, 51.88144365742528 ], [ 0.91613912610168, 51.88145555515014 ], [ 0.915933298553328, 51.881463357339797 ], [ 0.915652217169243, 51.881476621848734 ], [ 0.915484247081051, 51.881486181825672 ], [ 0.915303179167124, 51.881495167199617 ], [ 0.915032382081902, 51.881509973470926 ], [ 0.914778873006563, 51.881523451410523 ], [ 0.914515256753215, 51.881536280217745 ], [ 0.914315286865372, 51.881545732613532 ], [ 0.914202349364867, 51.881552128410966 ], [ 0.91416305610943, 51.881550404942168 ], [ 0.914133753676999, 51.881547534711132 ], [ 0.914092037330798, 51.881530586147313 ], [ 0.914064635192414, 51.881534861802102 ], [ 0.914058939568137, 51.881604235603618 ], [ 0.913871780046409, 51.881607974990075 ], [ 0.913900532364438, 51.88133383846192 ], [ 0.913917565262247, 51.88074341037305 ], [ 0.913915618714501, 51.880511484301309 ], [ 0.913833603674322, 51.880456872005311 ], [ 0.913786842581242, 51.880386010937187 ], [ 0.913649135214015, 51.880053959957102 ], [ 0.913403240720076, 51.879533075995766 ], [ 0.913283588243218, 51.879300380117705 ], [ 0.913185285838128, 51.879038383111109 ], [ 0.913038300145875, 51.878653512941725 ], [ 0.912870983102134, 51.878111709462075 ], [ 0.912874541304731, 51.877694337226671 ], [ 0.912882068522283, 51.877542108633129 ], [ 0.912867085588723, 51.877466054180474 ], [ 0.912805599364724, 51.877437906363596 ], [ 0.912671047036016, 51.877400779144196 ], [ 0.912582803327189, 51.877384982718738 ], [ 0.912494153328336, 51.877362902414752 ], [ 0.912106774318374, 51.87730497366146 ], [ 0.911659053816844, 51.877279198182528 ], [ 0.910845194815755, 51.87725529345915 ], [ 0.909926648245021, 51.877274434814687 ], [ 0.909670899249886, 51.877252891518367 ], [ 0.909314163264232, 51.877218561517246 ], [ 0.908384292245072, 51.8771309752075 ], [ 0.908277728226409, 51.877122731840934 ], [ 0.908232519705985, 51.877120253622557 ], [ 0.908188745426027, 51.877208641402873 ], [ 0.908007083445798, 51.877545900731107 ], [ 0.907888040374143, 51.87770439359209 ], [ 0.907726401053779, 51.877900893805283 ], [ 0.907586018157088, 51.878023949121449 ], [ 0.907354930378132, 51.878224863611997 ], [ 0.90713896490615, 51.878368668968015 ], [ 0.907122137459287, 51.878378975413113 ], [ 0.907045194451947, 51.878425024888081 ], [ 0.906476964377067, 51.878739470610434 ], [ 0.906305963132985, 51.878857886479572 ], [ 0.905803484441867, 51.879157216640536 ], [ 0.90439353651545, 51.880006840402224 ], [ 0.904392100993312, 51.880006875863238 ], [ 0.904344316112181, 51.880033231718144 ], [ 0.904336166117978, 51.8800406260278 ], [ 0.904185133823075, 51.880132560746368 ], [ 0.904031996055894, 51.880282900377274 ], [ 0.904003347248133, 51.880310581683851 ], [ 0.903871370881516, 51.880270683389554 ], [ 0.903593978168444, 51.880183126162159 ], [ 0.903353643783826, 51.880107240915706 ], [ 0.903161900201356, 51.880017477750883 ], [ 0.90296870540926, 51.879882883859892 ], [ 0.902777974766133, 51.879630353765876 ], [ 0.902671125181507, 51.879506215333478 ], [ 0.902619161218453, 51.879443570543998 ], [ 0.902557150743474, 51.879383061909991 ], [ 0.902488132571657, 51.879327221855746 ], [ 0.902407746268306, 51.879273460640192 ], [ 0.902255699001237, 51.879169319160937 ], [ 0.90213067173243, 51.879123762764571 ], [ 0.902039998502742, 51.879070255219737 ], [ 0.901914565974001, 51.878994228325332 ], [ 0.901692967582603, 51.87880359876965 ], [ 0.901515661277313, 51.878601176198579 ], [ 0.901441918235169, 51.878516590297131 ], [ 0.901409326032148, 51.87846074983652 ] ] ] }
class MapHolder extends React.Component {
constructor() {
super();
this.state = {
geodatas: geodatas,
lat: 51.881403,
lng: 0.918583,
zoom: 17,
};
}
render() {
const accessToken = 'pk.eyJ1IjoiZ2F6YXN0b24iLCJhIjoiY2loa21hNzRoMG50eHQ0bHp2azNpeHhwaiJ9.h81FekBCVUufbqxc9ywySQ'
const position = [this.state.lat, this.state.lng];
console.log(this.refs.geojson);
console.log(this.refs.foo.leafletElement);
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.getBounds());
return (
<div>
<Map ref="foo" style={{height: "260px"}} center={position} zoom={this.state.zoom} scrollWheelZoom={false} >
<TileLayer
attribution='© OpenStreetMap contributors'
url={`https://api.mapbox.com/styles/v1/gazaston/cihkojpjh00whrom498ghjoc5/tiles/256/{z}/{x}/{y}?access_token=${accessToken}`}
id='gazaston.o9phia6g'
detectRetina={true}
/>
<GeoJson ref="geojson" data={this.state.geodatas} />
</Map>
</div>
);
}
export default MapHolder;
UPDATE:
When I use the React dev tools, select my <MapHolder> component, switch to the console, and run
$r.refs.foo.leafletElement.fitBounds($r.refs.geojson.leafletElement.getBounds());
everything works as expected. However, in my code
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());
returns Uncaught TypeError: Cannot read property 'leafletElement' of undefined
I'm so close! What am I missing?

Because of the way that react-leaflet handles its lifecycle in which it turns over control to leaflet immediately after it mounts the Map component, it can be tricky to access subcomponent refs.
I solved this issue two ways.
My first attempt involved storing the number of features that was adding within my outer component state, attaching an map-object event handler for layeradd as recommended above, and then accessing the Geojson ref once all the polygons had been added.
```
componentDidMount() {
let count = 0;
const map = this.refs.map.leafletElement;
map.on('layeradd', () => {
count += 1;
if (count > this.state.polygonCount) {
setTimeout(()=>{DO STUFF}, 200)
}
});
}
```
While this works, it smells.
The second way I solved this was to use turf-bbox to pre-compute the bounds of the geojson, which I then passed in to the Map object in my render method.
```
const bboxArray = bbox(geojson);
const corner1 = [bboxArray[1], bboxArray[0]];
const corner2 = [bboxArray[3], bboxArray[2]];
this.state.bounds = [corner1, corner2];
```
and then
```
<Map bounds={this.state.bounds} ref="map">
```
The second way is much cleaner if you don't need to do anything more with the GeoJSON leafletElement, but the first way will let you set up any number of event handlers, etc.

Based on #IvanSanchez reply and how react-leaflet works I would suggest first add a ref to your GeoJson layer
<GeoJson ref="geojson" data={this.state.geodatas} />
then access the map with its ref
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds())

Seems like you're 99% of the way there! For benefit of future readers, you can escape the lingering uncaught type error:
Uncaught TypeError: Cannot read property 'leafletElement' of undefined
...by wrapping the fitBounds method call in a check to ensure this.refs.foo, this.refs.geojson and friends exist:
if (this.refs.foo && this.refs.foo.leafletElement && this.refs.geojson && this.refs.geojson.leafletElement) {
this.refs.foo.leafletElement.fitBounds(this.refs.geojson.leafletElement.getBounds());
}
The reason the current implementation throws an error is that the map and GeoJSON refs aren't set until the render method is called once. That means this.refs.foo and this.refs.geojson aren't set the very first time the render method is called.
You could also consider moving the entire fitBounds operation out of the render method and into componentWillReceiveProps; this would be especially worthwhile if geodata was likely to update dynamically via props sent in to the map component.

Related

How to push geoJSON data into empty arrays to construct multiple polygons on a google map?

I am trying to draw multiple polygon's (shells) onto a google map.
I have at a problem:
A nested loop, which draws each polygon multiple times onto the map.
Besides that the code is working more or less.
Tried to put the empty array into different positions and to clear the content with each iteration - but somehow I couldn't find the right approach... feels like this loop should be built differently... :-)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: 47.586, lng: 9},
mapTypeId: 'terrain'
});
//Coordinates
const array = [
[
[
47.42260606,
9.367119279999999
],
[
47.4230557,
9.36666964
],
[
47.4253039,
9.36891784
],
[
47.4253039,
9.372514959999998
],
[
47.42485426,
9.3729646
],
[
47.42125714,
9.3729646
],
[
47.4208075,
9.372514959999998
],
[
47.4208075,
9.37161568
],
[
47.419908219999996,
9.3707164
],
[
47.419908219999996,
9.36891784
],
[
47.42035786,
9.368468199999999
],
[
47.42125714,
9.368468199999999
],
[
47.42260606,
9.367119279999999
]
],
[
[
47.450034099999996,
9.418827879999998
],
[
47.45138302,
9.420176799999998
],
[
47.45093338,
9.420626439999998
],
[
47.44913482,
9.420626439999998
],
[
47.4477859,
9.419277519999998
],
[
47.44823554,
9.418827879999998
],
[
47.450034099999996,
9.418827879999998
]
],
[
[
47.52152686,
9.421975359999998
],
[
47.5219765,
9.421525719999998
],
[
47.52287578,
9.421525719999998
],
[
47.52332542,
9.421975359999998
],
[
47.52332542,
9.422874639999998
],
[
47.5242247,
9.423773919999999
],
[
47.5242247,
9.425572479999998
],
[
47.52287578,
9.426921399999998
],
[
47.52107722,
9.426921399999998
],
[
47.5197283,
9.425572479999998
],
[
47.5197283,
9.422874639999998
],
[
47.520177939999996,
9.422424999999999
],
[
47.52107722,
9.422424999999999
],
[
47.52152686,
9.421975359999998
]
],
[
[
47.510285859999996,
9.427820679999998
],
[
47.51118514,
9.428719959999999
],
[
47.51208442,
9.428719959999999
],
[
47.51253406,
9.429169599999998
],
[
47.51253406,
9.430968159999997
],
[
47.515231899999996,
9.433665999999999
],
[
47.51388298,
9.435014919999999
],
[
47.5129837,
9.435014919999999
],
[
47.51253406,
9.435464559999998
],
[
47.51343334,
9.436363839999999
],
[
47.51343334,
9.437263119999997
],
[
47.5129837,
9.437712759999998
],
[
47.51208442,
9.437712759999998
],
[
47.51118514,
9.436813479999998
],
[
47.510285859999996,
9.437712759999998
],
[
47.5084873,
9.437712759999998
],
[
47.50803766,
9.437263119999997
],
[
47.50803766,
9.436363839999999
],
[
47.5062391,
9.434565279999998
],
[
47.5062391,
9.432766719999998
],
[
47.50668874,
9.432317079999997
],
[
47.50758802,
9.432317079999997
],
[
47.50803766,
9.431867439999998
],
[
47.50803766,
9.430968159999997
],
[
47.50893694,
9.430068879999999
],
[
47.50893694,
9.428270319999998
],
[
47.50938658,
9.427820679999998
],
[
47.510285859999996,
9.427820679999998
]
],
[
[
47.45857726,
9.426471759999998
],
[
47.45857726,
9.427371039999999
],
[
47.4590269,
9.427820679999998
],
[
47.46082546,
9.427820679999998
],
[
47.46217438,
9.429169599999998
],
[
47.46217438,
9.430968159999997
],
[
47.4612751,
9.431867439999998
],
[
47.4612751,
9.433665999999999
],
[
47.45992618,
9.435014919999999
],
[
47.45767798,
9.432766719999998
],
[
47.45767798,
9.429169599999998
],
[
47.4567787,
9.428270319999998
],
[
47.4567787,
9.426471759999998
],
[
47.45812762,
9.425122839999998
],
[
47.45857726,
9.425572479999998
],
[
47.45857726,
9.426471759999998
]
],
[
[
47.49904486,
9.436363839999999
],
[
47.4994945,
9.435914199999997
],
[
47.50129306,
9.435914199999997
],
[
47.5017427,
9.436363839999999
],
[
47.50084342,
9.437263119999997
],
[
47.50084342,
9.438162399999998
],
[
47.50129306,
9.438612039999997
],
[
47.50219234,
9.438612039999997
],
[
47.50444054,
9.440860239999997
],
[
47.50444054,
9.442658799999998
],
[
47.50129306,
9.445806279999998
],
[
47.49814558,
9.442658799999998
],
[
47.49904486,
9.441759519999998
],
[
47.49904486,
9.440860239999997
],
[
47.49859522,
9.440410599999998
],
[
47.49769594,
9.440410599999998
],
[
47.49634702,
9.439061679999998
],
[
47.49904486,
9.436363839999999
]
],
[
[
47.49589738,
9.453899799999997
],
[
47.4972463,
9.455248719999998
],
[
47.4972463,
9.457047279999998
],
[
47.49814558,
9.457946559999998
],
[
47.49814558,
9.459745119999997
],
[
47.49994414,
9.461543679999997
],
[
47.49994414,
9.463342239999998
],
[
47.49904486,
9.464241519999998
],
[
47.49904486,
9.467838639999997
],
[
47.49679666,
9.470086839999997
],
[
47.49589738,
9.470086839999997
],
[
47.49544774,
9.470536479999998
],
[
47.49544774,
9.471435759999997
],
[
47.4949981,
9.471885399999998
],
[
47.4927499,
9.469637199999998
],
[
47.4927499,
9.468737919999997
],
[
47.49230026,
9.468288279999998
],
[
47.49140098,
9.468288279999998
],
[
47.48960242,
9.470086839999997
],
[
47.48780386,
9.470086839999997
],
[
47.48735422,
9.469637199999998
],
[
47.4882535,
9.468737919999997
],
[
47.4882535,
9.463342239999998
],
[
47.48735422,
9.462442959999997
],
[
47.48735422,
9.458845839999997
],
[
47.48780386,
9.458396199999997
],
[
47.48870314,
9.458396199999997
],
[
47.48915278,
9.457946559999998
],
[
47.48915278,
9.455248719999998
],
[
47.48960242,
9.454799079999997
],
[
47.4949981,
9.454799079999997
],
[
47.49589738,
9.453899799999997
]
]
];
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
// Polygon construction.
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
// latLngArray.length = 0
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>
</body>
</html>
How can I plot the polygon's only once?
You are currently creating a new polygon for each coordinate. Move the polygon creation outside of the loop that is creating the path array. So:
for each polygon
create/clear out the path array.
parse its path into an array of google.maps.LatLng objects.
create a google.maps.Polygon object using that path.
add the polygon to the map.
// for each polygon in the array
for (var y = 0; y < array.length; y++){
var shell = array[y];
var latLngArray = [];
// create path (array of LatLng objects) for this polygon
for (var i = 0; i < shell.length; i++) {
latLngArray.push(new google.maps.LatLng(shell[i][0], shell[i][1]));
}
// create polygon with the path
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
}
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: 47.586,
lng: 9
},
mapTypeId: 'terrain'
});
var bounds = new google.maps.LatLngBounds();
for (var y = 0; y < array.length; y++) {
var shell = array[y];
var latLngArray = [];
for (var i = 0; i < shell.length; i++) {
var pt = new google.maps.LatLng(shell[i][0], shell[i][1]);
bounds.extend(pt);
latLngArray.push(pt);
}
// Polygon construction.
var ttPoly = new google.maps.Polygon({
paths: latLngArray,
strokeColor: '#FF0000',
strokeOpacity: 0.2,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.2
});
ttPoly.setMap(map);
}
map.fitBounds(bounds);
}
//Coordinates
const array = [
[
[
47.42260606,
9.367119279999999
],
[
47.4230557,
9.36666964
],
[
47.4253039,
9.36891784
],
[
47.4253039,
9.372514959999998
],
[
47.42485426,
9.3729646
],
[
47.42125714,
9.3729646
],
[
47.4208075,
9.372514959999998
],
[
47.4208075,
9.37161568
],
[
47.419908219999996,
9.3707164
],
[
47.419908219999996,
9.36891784
],
[
47.42035786,
9.368468199999999
],
[
47.42125714,
9.368468199999999
],
[
47.42260606,
9.367119279999999
]
],
[
[
47.450034099999996,
9.418827879999998
],
[
47.45138302,
9.420176799999998
],
[
47.45093338,
9.420626439999998
],
[
47.44913482,
9.420626439999998
],
[
47.4477859,
9.419277519999998
],
[
47.44823554,
9.418827879999998
],
[
47.450034099999996,
9.418827879999998
]
],
[
[
47.52152686,
9.421975359999998
],
[
47.5219765,
9.421525719999998
],
[
47.52287578,
9.421525719999998
],
[
47.52332542,
9.421975359999998
],
[
47.52332542,
9.422874639999998
],
[
47.5242247,
9.423773919999999
],
[
47.5242247,
9.425572479999998
],
[
47.52287578,
9.426921399999998
],
[
47.52107722,
9.426921399999998
],
[
47.5197283,
9.425572479999998
],
[
47.5197283,
9.422874639999998
],
[
47.520177939999996,
9.422424999999999
],
[
47.52107722,
9.422424999999999
],
[
47.52152686,
9.421975359999998
]
],
[
[
47.510285859999996,
9.427820679999998
],
[
47.51118514,
9.428719959999999
],
[
47.51208442,
9.428719959999999
],
[
47.51253406,
9.429169599999998
],
[
47.51253406,
9.430968159999997
],
[
47.515231899999996,
9.433665999999999
],
[
47.51388298,
9.435014919999999
],
[
47.5129837,
9.435014919999999
],
[
47.51253406,
9.435464559999998
],
[
47.51343334,
9.436363839999999
],
[
47.51343334,
9.437263119999997
],
[
47.5129837,
9.437712759999998
],
[
47.51208442,
9.437712759999998
],
[
47.51118514,
9.436813479999998
],
[
47.510285859999996,
9.437712759999998
],
[
47.5084873,
9.437712759999998
],
[
47.50803766,
9.437263119999997
],
[
47.50803766,
9.436363839999999
],
[
47.5062391,
9.434565279999998
],
[
47.5062391,
9.432766719999998
],
[
47.50668874,
9.432317079999997
],
[
47.50758802,
9.432317079999997
],
[
47.50803766,
9.431867439999998
],
[
47.50803766,
9.430968159999997
],
[
47.50893694,
9.430068879999999
],
[
47.50893694,
9.428270319999998
],
[
47.50938658,
9.427820679999998
],
[
47.510285859999996,
9.427820679999998
]
],
[
[
47.45857726,
9.426471759999998
],
[
47.45857726,
9.427371039999999
],
[
47.4590269,
9.427820679999998
],
[
47.46082546,
9.427820679999998
],
[
47.46217438,
9.429169599999998
],
[
47.46217438,
9.430968159999997
],
[
47.4612751,
9.431867439999998
],
[
47.4612751,
9.433665999999999
],
[
47.45992618,
9.435014919999999
],
[
47.45767798,
9.432766719999998
],
[
47.45767798,
9.429169599999998
],
[
47.4567787,
9.428270319999998
],
[
47.4567787,
9.426471759999998
],
[
47.45812762,
9.425122839999998
],
[
47.45857726,
9.425572479999998
],
[
47.45857726,
9.426471759999998
]
],
[
[
47.49904486,
9.436363839999999
],
[
47.4994945,
9.435914199999997
],
[
47.50129306,
9.435914199999997
],
[
47.5017427,
9.436363839999999
],
[
47.50084342,
9.437263119999997
],
[
47.50084342,
9.438162399999998
],
[
47.50129306,
9.438612039999997
],
[
47.50219234,
9.438612039999997
],
[
47.50444054,
9.440860239999997
],
[
47.50444054,
9.442658799999998
],
[
47.50129306,
9.445806279999998
],
[
47.49814558,
9.442658799999998
],
[
47.49904486,
9.441759519999998
],
[
47.49904486,
9.440860239999997
],
[
47.49859522,
9.440410599999998
],
[
47.49769594,
9.440410599999998
],
[
47.49634702,
9.439061679999998
],
[
47.49904486,
9.436363839999999
]
],
[
[
47.49589738,
9.453899799999997
],
[
47.4972463,
9.455248719999998
],
[
47.4972463,
9.457047279999998
],
[
47.49814558,
9.457946559999998
],
[
47.49814558,
9.459745119999997
],
[
47.49994414,
9.461543679999997
],
[
47.49994414,
9.463342239999998
],
[
47.49904486,
9.464241519999998
],
[
47.49904486,
9.467838639999997
],
[
47.49679666,
9.470086839999997
],
[
47.49589738,
9.470086839999997
],
[
47.49544774,
9.470536479999998
],
[
47.49544774,
9.471435759999997
],
[
47.4949981,
9.471885399999998
],
[
47.4927499,
9.469637199999998
],
[
47.4927499,
9.468737919999997
],
[
47.49230026,
9.468288279999998
],
[
47.49140098,
9.468288279999998
],
[
47.48960242,
9.470086839999997
],
[
47.48780386,
9.470086839999997
],
[
47.48735422,
9.469637199999998
],
[
47.4882535,
9.468737919999997
],
[
47.4882535,
9.463342239999998
],
[
47.48735422,
9.462442959999997
],
[
47.48735422,
9.458845839999997
],
[
47.48780386,
9.458396199999997
],
[
47.48870314,
9.458396199999997
],
[
47.48915278,
9.457946559999998
],
[
47.48915278,
9.455248719999998
],
[
47.48960242,
9.454799079999997
],
[
47.4949981,
9.454799079999997
],
[
47.49589738,
9.453899799999997
]
]
];
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

GPS Coordinates to svg map

Is there a way to transform a GPS coordinates objects to an SVG map ?
I have Something like this object and I want to draw an svg map USING Javascript if it's possible (or any other language if it exists).
Thanks in advance for your help
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "area": 1.470000, "perimeter": 4.820000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -3.942000, 48.437000 ], [ -3.951000, 48.433998 ], [ -3.959000, 48.431999 ], [ -3.968000, 48.430000 ], [ -3.976000, 48.428001 ], [ -3.984000, 48.424999 ], [ -3.993000, 48.423000 ], [ -4.001000, 48.421001 ], [ -4.009000, 48.417999 ], [ -4.018000, 48.416000 ], [ -4.024000, 48.410999 ], [ -4.030000, 48.407001 ], [ -4.036000, 48.403000 ], [ -4.042000, 48.397999 ], [ -4.048000, 48.394001 ], [ -4.054000, 48.389000 ], [ -4.060000, 48.383999 ], [ -4.066000, 48.380001 ], [ -4.071000, 48.375000 ], [ -4.077000, 48.369999 ], [ -4.082000, 48.365002 ], [ -4.088000, 48.361000 ], [ -4.093000, 48.355999 ], [ -4.099000, 48.351002 ], [ -4.104000, 48.346001 ], [ -4.109000, 48.341000 ], [ -4.114000, 48.335999 ], [ -4.120000, 48.331001 ], [ -4.125000, 48.326000 ], [ -4.129000, 48.320999 ], [ -4.134000, 48.316002 ], [ -4.138000, 48.310001 ], [ -4.141000, 48.305000 ], [ -4.145000, 48.299000 ], [ -4.147000, 48.292999 ], [ -4.150000, 48.287998 ], [ -4.153000, 48.282001 ], [ -4.155000, 48.276001 ], [ -4.157000, 48.270000 ], [ -4.159000, 48.264000 ], [ -4.161000, 48.257999 ], [ -4.163000, 48.252998 ], [ -4.165000, 48.247002 ], [ -4.167000, 48.241001 ], [ -4.169000, 48.235001 ], [ -4.170000, 48.229000 ], [ -4.171000, 48.223000 ], [ -4.173000, 48.216999 ], [ -4.173000, 48.210999 ], [ -4.174000, 48.205002 ], [ -4.174000, 48.199001 ], [ -4.173000, 48.193001 ], [ -4.173000, 48.187000 ], [ -4.171000, 48.181000 ], [ -4.167000, 48.175999 ], [ -4.166000, 48.169998 ], [ -4.165000, 48.164001 ], [ -4.164000, 48.158001 ], [ -4.162000, 48.152000 ], [ -4.161000, 48.146000 ], [ -4.159000, 48.139999 ], [ -4.156000, 48.133999 ], [ -4.154000, 48.127998 ], [ -4.151000, 48.122002 ], [ -4.148000, 48.117001 ], [ -4.144000, 48.111000 ], [ -4.140000, 48.105999 ], [ -4.136000, 48.101002 ], [ -4.131000, 48.095001 ], [ -4.127000, 48.090000 ], [ -4.121000, 48.084999 ], [ -4.116000, 48.080002 ], [ -4.111000, 48.076000 ], [ -4.105000, 48.070999 ], [ -4.099000, 48.066002 ], [ -4.093000, 48.062000 ], [ -4.087000, 48.056999 ], [ -4.081000, 48.053001 ], [ -4.074000, 48.049000 ], [ -4.068000, 48.044998 ], [ -4.061000, 48.040001 ], [ -4.049000, 48.033001 ], [ -4.621000, 47.514000 ], [ -4.628000, 47.518002 ], [ -4.635000, 47.521999 ], [ -4.641000, 47.526001 ], [ -4.648000, 47.529999 ], [ -4.655000, 47.534000 ], [ -4.661000, 47.537998 ], [ -4.668000, 47.542000 ], [ -4.674000, 47.546001 ], [ -4.679000, 47.550999 ], [ -4.685000, 47.556000 ], [ -4.691000, 47.560001 ], [ -4.697000, 47.564999 ], [ -4.703000, 47.569000 ], [ -4.709000, 47.574001 ], [ -4.715000, 47.577999 ], [ -4.720000, 47.583000 ], [ -4.726000, 47.587002 ], [ -4.732000, 47.591999 ], [ -4.738000, 47.597000 ], [ -4.744000, 47.601002 ], [ -4.750000, 47.605999 ], [ -4.756000, 47.610001 ], [ -4.761000, 47.615002 ], [ -4.767000, 47.618999 ], [ -4.773000, 47.624001 ], [ -4.779000, 47.627998 ], [ -4.785000, 47.632999 ], [ -4.791000, 47.638000 ], [ -4.797000, 47.641998 ], [ -4.803000, 47.646999 ], [ -4.808000, 47.651001 ], [ -4.814000, 47.655998 ], [ -4.820000, 47.660000 ], [ -4.826000, 47.665001 ], [ -4.832000, 47.668999 ], [ -4.838000, 47.674000 ], [ -4.844000, 47.678001 ], [ -4.850000, 47.682999 ], [ -4.855000, 47.687000 ], [ -4.861000, 47.692001 ], [ -4.867000, 47.696999 ], [ -4.873000, 47.701000 ], [ -4.879000, 47.706001 ], [ -4.885000, 47.709999 ], [ -4.891000, 47.715000 ], [ -4.897000, 47.719002 ], [ -4.903000, 47.723999 ], [ -4.908000, 47.728001 ], [ -4.914000, 47.733002 ], [ -4.920000, 47.737000 ], [ -4.926000, 47.742001 ], [ -4.932000, 47.747002 ], [ -4.938000, 47.750999 ], [ -4.944000, 47.756001 ], [ -4.950000, 47.759998 ], [ -4.956000, 47.764999 ], [ -4.962000, 47.769001 ], [ -4.967000, 47.773998 ], [ -4.973000, 47.778000 ], [ -4.979000, 47.783001 ], [ -4.985000, 47.786999 ], [ -4.991000, 47.792000 ], [ -4.997000, 47.796001 ], [ -5.003000, 47.800999 ], [ -5.009000, 47.806000 ], [ -5.015000, 47.810001 ], [ -5.021000, 47.814999 ], [ -5.026000, 47.819000 ], [ -5.032000, 47.824001 ], [ -5.038000, 47.827999 ], [ -5.044000, 47.833000 ], [ -5.050000, 47.837002 ], [ -5.056000, 47.841999 ], [ -5.062000, 47.846001 ], [ -5.068000, 47.851002 ], [ -5.074000, 47.855000 ], [ -5.080000, 47.860001 ], [ -5.086000, 47.865002 ], [ -5.092000, 47.868999 ], [ -5.097000, 47.874001 ], [ -5.103000, 47.877998 ], [ -5.109000, 47.882999 ], [ -5.115000, 47.887001 ], [ -5.121000, 47.891998 ], [ -5.127000, 47.896000 ], [ -5.133000, 47.901001 ], [ -5.139000, 47.904999 ], [ -5.145000, 47.910000 ], [ -5.151000, 47.914001 ], [ -5.157000, 47.918999 ], [ -5.163000, 47.924000 ], [ -5.168000, 47.928001 ], [ -5.174000, 47.932999 ], [ -5.180000, 47.937000 ], [ -5.186000, 47.942001 ], [ -5.192000, 47.945999 ], [ -5.198000, 47.951000 ], [ -5.204000, 47.955002 ], [ -5.210000, 47.959999 ], [ -5.216000, 47.964001 ], [ -5.222000, 47.969002 ], [ -5.228000, 47.973000 ], [ -5.233000, 47.978001 ], [ -5.238000, 47.983002 ], [ -5.243000, 47.987999 ], [ -5.247000, 47.993999 ], [ -5.251000, 47.999001 ], [ -5.255000, 48.005001 ], [ -5.259000, 48.009998 ], [ -5.264000, 48.014999 ], [ -5.269000, 48.020000 ], [ -5.274000, 48.025002 ], [ -5.277000, 48.030998 ], [ -5.280000, 48.035999 ], [ -5.283000, 48.042000 ], [ -5.285000, 48.048000 ], [ -5.286000, 48.054001 ], [ -5.287000, 48.060001 ], [ -5.287000, 48.066002 ], [ -5.287000, 48.071999 ], [ -5.288000, 48.077999 ], [ -5.288000, 48.084000 ], [ -5.289000, 48.090000 ], [ -5.289000, 48.096001 ], [ -5.290000, 48.102001 ], [ -5.290000, 48.108002 ], [ -5.291000, 48.113998 ], [ -5.291000, 48.119999 ], [ -5.292000, 48.125999 ], [ -5.292000, 48.132000 ], [ -5.292000, 48.138000 ], [ -5.293000, 48.144001 ], [ -5.293000, 48.150002 ], [ -5.294000, 48.155998 ], [ -5.294000, 48.161999 ], [ -5.295000, 48.167999 ], [ -5.295000, 48.174000 ], [ -5.296000, 48.181000 ], [ -5.296000, 48.187000 ], [ -5.296000, 48.193001 ], [ -5.297000, 48.199001 ], [ -5.297000, 48.205002 ], [ -5.298000, 48.210999 ], [ -5.298000, 48.216999 ], [ -5.299000, 48.223000 ], [ -5.299000, 48.229000 ], [ -5.299000, 48.235001 ], [ -5.300000, 48.241001 ], [ -5.300000, 48.247002 ], [ -5.301000, 48.252998 ], [ -5.301000, 48.258999 ], [ -5.302000, 48.264999 ], [ -5.302000, 48.271000 ], [ -5.302000, 48.277000 ], [ -5.303000, 48.283001 ], [ -5.303000, 48.289001 ], [ -5.304000, 48.294998 ], [ -5.304000, 48.300999 ], [ -5.305000, 48.306999 ], [ -5.305000, 48.313000 ], [ -5.305000, 48.319000 ], [ -5.306000, 48.325001 ], [ -5.306000, 48.331001 ], [ -5.306000, 48.337002 ], [ -5.306000, 48.342999 ], [ -5.305000, 48.348999 ], [ -5.305000, 48.355000 ], [ -5.304000, 48.361000 ], [ -5.304000, 48.367001 ], [ -5.304000, 48.373001 ], [ -5.304000, 48.379002 ], [ -5.304000, 48.384998 ], [ -5.305000, 48.391998 ], [ -5.305000, 48.397999 ], [ -5.305000, 48.403999 ], [ -5.305000, 48.410000 ], [ -5.306000, 48.416000 ], [ -5.306000, 48.422001 ], [ -5.306000, 48.428001 ], [ -5.307000, 48.433998 ], [ -5.307000, 48.439999 ], [ -5.307000, 48.445999 ], [ -5.308000, 48.452000 ], [ -5.308000, 48.458000 ], [ -5.308000, 48.464001 ], [ -5.309000, 48.470001 ], [ -5.309000, 48.476002 ], [ -5.309000, 48.481998 ], [ -5.310000, 48.487999 ], [ -5.310000, 48.493999 ], [ -5.310000, 48.500000 ], [ -5.310000, 48.506001 ], [ -5.310000, 48.512001 ], [ -5.310000, 48.518002 ], [ -5.309000, 48.523998 ], [ -5.309000, 48.529999 ], [ -5.309000, 48.535999 ], [ -5.308000, 48.542000 ], [ -5.308000, 48.548000 ], [ -5.307000, 48.554001 ], [ -5.306000, 48.560001 ], [ -5.305000, 48.566002 ], [ -5.303000, 48.571999 ], [ -5.302000, 48.577999 ], [ -5.300000, 48.584000 ], [ -5.299000, 48.590000 ], [ -5.297000, 48.596001 ], [ -5.294000, 48.602001 ], [ -5.292000, 48.608002 ], [ -5.289000, 48.612999 ], [ -5.286000, 48.618999 ], [ -5.283000, 48.625000 ], [ -5.279000, 48.630001 ], [ -5.276000, 48.636002 ], [ -5.271000, 48.640999 ], [ -5.267000, 48.646000 ], [ -5.263000, 48.652000 ], [ -5.258000, 48.657001 ], [ -5.253000, 48.661999 ], [ -5.248000, 48.667000 ], [ -5.243000, 48.672001 ], [ -5.238000, 48.676998 ], [ -5.232000, 48.681999 ], [ -5.227000, 48.687000 ], [ -5.221000, 48.691002 ], [ -5.216000, 48.695999 ], [ -5.210000, 48.701000 ], [ -5.204000, 48.705002 ], [ -5.198000, 48.709999 ], [ -5.192000, 48.714001 ], [ -5.186000, 48.719002 ], [ -5.180000, 48.723000 ], [ -5.173000, 48.728001 ], [ -5.167000, 48.731998 ], [ -5.160000, 48.736000 ], [ -5.154000, 48.740002 ], [ -5.147000, 48.744999 ], [ -5.141000, 48.749001 ], [ -5.134000, 48.752998 ], [ -5.127000, 48.757000 ], [ -5.121000, 48.761002 ], [ -5.114000, 48.764999 ], [ -5.107000, 48.769001 ], [ -5.100000, 48.772999 ], [ -5.093000, 48.777000 ], [ -5.086000, 48.780998 ], [ -5.079000, 48.785000 ], [ -5.072000, 48.789001 ], [ -5.065000, 48.792000 ], [ -5.058000, 48.796001 ], [ -5.051000, 48.799999 ], [ -5.044000, 48.804001 ], [ -5.037000, 48.807999 ], [ -5.030000, 48.811001 ], [ -5.023000, 48.814999 ], [ -5.015000, 48.819000 ], [ -5.008000, 48.823002 ], [ -5.001000, 48.826000 ], [ -4.994000, 48.830002 ], [ -4.987000, 48.834000 ], [ -4.980000, 48.838001 ], [ -4.972000, 48.841000 ], [ -4.965000, 48.845001 ], [ -4.958000, 48.848999 ], [ -4.951000, 48.853001 ], [ -4.944000, 48.855999 ], [ -4.937000, 48.860001 ], [ -4.930000, 48.863998 ], [ -4.922000, 48.868000 ], [ -4.915000, 48.872002 ], [ -4.908000, 48.875000 ], [ -4.901000, 48.879002 ], [ -4.894000, 48.882999 ], [ -4.887000, 48.887001 ], [ -4.880000, 48.890999 ], [ -4.873000, 48.895000 ], [ -4.866000, 48.898998 ], [ -4.860000, 48.903000 ], [ -4.853000, 48.907001 ], [ -4.846000, 48.910999 ], [ -4.839000, 48.915001 ], [ -4.832000, 48.918999 ], [ -4.826000, 48.923000 ], [ -4.818000, 48.926998 ], [ -4.811000, 48.930000 ], [ -4.804000, 48.933998 ], [ -4.797000, 48.938000 ], [ -4.790000, 48.942001 ], [ -4.783000, 48.945999 ], [ -4.776000, 48.950001 ], [ -4.769000, 48.953999 ], [ -4.763000, 48.958000 ], [ -4.757000, 48.963001 ], [ -4.750000, 48.966999 ], [ -4.742000, 48.969002 ], [ -4.733000, 48.971001 ], [ -4.725000, 48.973999 ], [ -4.717000, 48.976002 ], [ -4.708000, 48.979000 ], [ -4.700000, 48.981998 ], [ -4.692000, 48.985001 ], [ -4.684000, 48.987000 ], [ -4.676000, 48.990002 ], [ -4.668000, 48.993000 ], [ -4.659000, 48.994999 ], [ -4.650000, 48.997002 ], [ -4.642000, 48.999001 ], [ -4.633000, 49.000000 ], [ -4.624000, 49.001999 ], [ -4.615000, 49.004002 ], [ -4.606000, 49.006001 ], [ -4.598000, 49.007000 ], [ -4.589000, 49.008999 ], [ -4.580000, 49.011002 ], [ -4.571000, 49.013000 ], [ -4.563000, 49.014999 ], [ -4.554000, 49.015999 ], [ -4.545000, 49.018002 ], [ -4.536000, 49.020000 ], [ -4.528000, 49.021999 ], [ -4.519000, 49.023998 ], [ -4.510000, 49.025002 ], [ -4.501000, 49.027000 ], [ -4.493000, 49.028999 ], [ -4.484000, 49.030998 ], [ -4.475000, 49.033001 ], [ -4.466000, 49.034000 ], [ -4.458000, 49.035999 ], [ -4.449000, 49.037998 ], [ -4.440000, 49.040001 ], [ -4.431000, 49.041000 ], [ -4.423000, 49.042999 ], [ -4.414000, 49.044998 ], [ -4.405000, 49.047001 ], [ -4.396000, 49.049000 ], [ -4.388000, 49.049999 ], [ -4.379000, 49.051998 ], [ -4.370000, 49.054001 ], [ -4.361000, 49.056000 ], [ -4.353000, 49.057999 ], [ -4.344000, 49.058998 ], [ -4.335000, 49.061001 ], [ -4.326000, 49.063000 ], [ -4.317000, 49.064999 ], [ -4.309000, 49.066002 ], [ -4.300000, 49.068001 ], [ -4.291000, 49.070000 ], [ -4.282000, 49.070999 ], [ -4.273000, 49.073002 ], [ -4.265000, 49.075001 ], [ -4.256000, 49.077000 ], [ -4.247000, 49.077999 ], [ -4.238000, 49.080002 ], [ -4.229000, 49.082001 ], [ -4.221000, 49.083000 ], [ -4.212000, 49.084999 ], [ -4.203000, 49.087002 ], [ -4.194000, 49.088001 ], [ -4.185000, 49.090000 ], [ -4.176000, 49.091000 ], [ -4.167000, 49.092999 ], [ -4.159000, 49.095001 ], [ -4.150000, 49.096001 ], [ -4.141000, 49.098000 ], [ -4.132000, 49.098999 ], [ -4.123000, 49.101002 ], [ -4.114000, 49.102001 ], [ -4.105000, 49.104000 ], [ -4.096000, 49.105000 ], [ -4.088000, 49.106998 ], [ -4.079000, 49.108002 ], [ -4.063093, 49.110609 ], [ -3.942000, 48.437000 ] ] ] } }
,
{ "type": "Feature", "properties": { "area": 0.870000, "perimeter": 4.320000 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -4.049000, 48.033001 ], [ -4.061000, 48.040001 ], [ -4.068000, 48.044998 ], [ -4.074000, 48.049000 ], [ -4.081000, 48.053001 ], [ -4.087000, 48.056999 ], [ -4.093000, 48.062000 ], [ -4.099000, 48.066002 ], [ -4.105000, 48.070999 ], [ -4.111000, 48.076000 ], [ -4.116000, 48.080002 ], [ -4.121000, 48.084999 ], [ -4.127000, 48.090000 ], [ -4.131000, 48.095001 ], [ -4.136000, 48.101002 ], [ -4.140000, 48.105999 ], [ -4.144000, 48.111000 ], [ -4.148000, 48.117001 ], [ -4.151000, 48.122002 ], [ -4.154000, 48.127998 ], [ -4.156000, 48.133999 ], [ -4.159000, 48.139999 ], [ -4.161000, 48.146000 ], [ -4.162000, 48.152000 ], [ -4.164000, 48.158001 ], [ -4.165000, 48.164001 ], [ -4.166000, 48.169998 ], [ -4.167000, 48.175999 ], [ -4.171000, 48.181000 ], [ -4.173000, 48.187000 ], [ -4.173000, 48.193001 ], [ -4.174000, 48.199001 ], [ -4.174000, 48.205002 ], [ -4.173000, 48.210999 ], [ -4.173000, 48.216999 ], [ -4.171000, 48.223000 ], [ -4.170000, 48.229000 ], [ -4.169000, 48.235001 ], [ -4.167000, 48.241001 ], [ -4.165000, 48.247002 ], [ -4.163000, 48.252998 ], [ -4.161000, 48.257999 ], [ -4.159000, 48.264000 ], [ -4.157000, 48.270000 ], [ -4.155000, 48.276001 ], [ -4.153000, 48.282001 ], [ -4.150000, 48.287998 ], [ -4.147000, 48.292999 ], [ -4.145000, 48.299000 ], [ -4.141000, 48.305000 ], [ -4.138000, 48.310001 ], [ -4.134000, 48.316002 ], [ -4.129000, 48.320999 ], [ -4.125000, 48.326000 ], [ -4.120000, 48.331001 ], [ -4.114000, 48.335999 ], [ -4.109000, 48.341000 ], [ -4.104000, 48.346001 ], [ -4.099000, 48.351002 ], [ -4.093000, 48.355999 ], [ -4.088000, 48.361000 ], [ -4.082000, 48.365002 ], [ -4.077000, 48.369999 ], [ -4.071000, 48.375000 ], [ -4.066000, 48.380001 ], [ -4.060000, 48.383999 ], [ -4.054000, 48.389000 ], [ -4.048000, 48.394001 ], [ -4.042000, 48.397999 ], [ -4.036000, 48.403000 ], [ -4.030000, 48.407001 ], [ -4.024000, 48.410999 ], [ -4.018000, 48.416000 ], [ -4.009000, 48.417999 ], [ -4.001000, 48.421001 ], [ -3.993000, 48.423000 ], [ -3.984000, 48.424999 ], [ -3.976000, 48.428001 ], [ -3.968000, 48.430000 ], [ -3.959000, 48.431999 ], [ -3.951000, 48.433998 ], [ -3.942000, 48.437000 ], [ -3.934000, 48.438999 ], [ -3.926000, 48.441002 ], [ -3.917000, 48.444000 ], [ -3.909000, 48.445999 ], [ -3.901000, 48.449001 ], [ -3.893000, 48.452000 ], [ -3.884000, 48.453999 ], [ -3.876000, 48.456001 ], [ -3.868000, 48.459000 ], [ -3.859000, 48.460999 ], [ -3.851000, 48.463001 ], [ -3.843000, 48.465000 ], [ -3.834000, 48.466999 ], [ -3.825000, 48.469002 ], [ -3.816000, 48.471001 ], [ -3.808000, 48.472000 ], [ -3.799000, 48.473999 ], [ -3.790000, 48.474998 ], [ -3.781000, 48.476002 ], [ -3.772000, 48.478001 ], [ -3.764000, 48.479000 ], [ -3.755000, 48.480999 ], [ -3.746000, 48.481998 ], [ -3.737000, 48.483002 ], [ -3.728000, 48.484001 ], [ -3.719000, 48.486000 ], [ -3.710000, 48.487000 ], [ -3.701000, 48.487999 ], [ -3.692000, 48.488998 ], [ -3.684000, 48.490002 ], [ -3.675000, 48.491001 ], [ -3.666000, 48.492001 ], [ -3.657000, 48.493000 ], [ -3.648000, 48.493999 ], [ -3.639000, 48.494999 ], [ -3.630000, 48.495998 ], [ -3.621000, 48.497002 ], [ -3.612000, 48.497002 ], [ -3.603000, 48.498001 ], [ -3.594000, 48.499001 ], [ -3.585000, 48.500000 ], [ -3.576000, 48.500000 ], [ -3.567000, 48.500999 ], [ -3.558000, 48.500999 ], [ -3.549000, 48.501999 ], [ -3.540000, 48.501999 ], [ -3.530000, 48.501999 ], [ -3.521000, 48.502998 ], [ -3.512000, 48.502998 ], [ -3.503000, 48.502998 ], [ -3.494000, 48.502998 ], [ -3.485000, 48.502998 ], [ -3.476000, 48.502998 ], [ -3.467000, 48.502998 ], [ -3.458000, 48.502998 ], [ -3.449000, 48.502998 ], [ -3.440000, 48.502998 ], [ -3.431000, 48.502998 ], [ -3.422000, 48.502998 ], [ -3.412000, 48.502998 ], [ -3.403000, 48.502998 ], [ -3.394000, 48.502998 ], [ -3.385000, 48.502998 ], [ -3.376000, 48.502998 ], [ -3.367000, 48.502998 ], [ -3.358000, 48.502998 ], [ -3.349000, 48.502998 ], [ -3.340000, 48.502998 ], [ -3.331000, 48.504002 ], [ -3.322000, 48.505001 ], [ -3.313000, 48.505001 ], [ -3.304000, 48.506001 ], [ -3.295000, 48.507000 ], [ -3.286000, 48.507999 ], [ -3.277000, 48.507999 ], [ -3.268000, 48.508999 ], [ -3.259000, 48.509998 ], [ -3.250000, 48.511002 ], [ -3.241000, 48.512001 ], [ -3.232000, 48.512001 ], [ -3.223000, 48.513000 ], [ -3.214000, 48.513000 ], [ -3.205000, 48.513000 ], [ -3.195000, 48.513000 ], [ -3.186000, 48.513000 ], [ -3.177000, 48.513000 ], [ -3.168000, 48.512001 ], [ -3.159000, 48.512001 ], [ -3.150000, 48.509998 ], [ -3.142000, 48.508999 ], [ -3.133000, 48.507000 ], [ -3.125000, 48.505001 ], [ -3.116000, 48.501999 ], [ -3.108000, 48.500000 ], [ -3.100000, 48.497002 ], [ -3.092000, 48.493999 ], [ -3.084000, 48.492001 ], [ -3.076000, 48.488998 ], [ -3.068000, 48.486000 ], [ -3.060000, 48.483002 ], [ -3.052000, 48.479000 ], [ -3.045000, 48.476002 ], [ -3.037000, 48.473000 ], [ -3.029000, 48.470001 ], [ -3.022000, 48.466000 ], [ -3.015000, 48.463001 ], [ -3.007000, 48.459000 ], [ -3.000000, 48.456001 ], [ -2.992000, 48.452000 ], [ -2.985000, 48.449001 ], [ -2.978000, 48.445000 ], [ -2.971000, 48.441002 ], [ -2.964000, 48.438000 ], [ -2.956000, 48.433998 ], [ -2.949000, 48.430000 ], [ -2.942000, 48.425999 ], [ -2.935000, 48.423000 ], [ -2.928000, 48.418999 ], [ -2.921000, 48.415001 ], [ -2.914000, 48.410999 ], [ -2.907000, 48.408001 ], [ -2.900000, 48.403999 ], [ -2.893000, 48.400002 ], [ -2.885000, 48.396000 ], [ -2.878000, 48.393002 ], [ -2.871000, 48.389000 ], [ -2.864000, 48.384998 ], [ -2.857000, 48.381001 ], [ -2.850000, 48.377998 ], [ -2.843000, 48.374001 ], [ -2.835000, 48.369999 ], [ -2.828000, 48.367001 ], [ -2.821000, 48.362999 ], [ -2.813000, 48.360001 ], [ -2.806000, 48.355999 ], [ -2.799000, 48.353001 ], [ -2.791000, 48.349998 ], [ -2.783000, 48.346001 ], [ -2.776000, 48.342999 ], [ -2.768000, 48.340000 ], [ -2.760000, 48.337002 ], [ -2.752000, 48.334000 ], [ -2.744000, 48.332001 ], [ -2.735000, 48.331001 ], [ -2.726000, 48.330002 ], [ -2.717000, 48.328999 ], [ -2.708000, 48.327999 ], [ -2.699000, 48.327000 ], [ -2.690000, 48.326000 ], [ -2.681000, 48.324001 ], [ -2.673000, 48.323002 ], [ -2.664000, 48.320999 ], [ -2.655000, 48.320000 ], [ -2.646000, 48.318001 ], [ -2.638000, 48.317001 ], [ -2.629000, 48.314999 ], [ -2.620000, 48.313999 ], [ -2.611000, 48.312000 ], [ -2.603000, 48.311001 ], [ -2.594000, 48.308998 ], [ -2.585000, 48.307999 ], [ -2.576000, 48.306000 ], [ -2.567000, 48.305000 ], [ -2.559000, 48.303001 ], [ -2.550000, 48.301998 ], [ -2.541000, 48.299999 ], [ -2.532000, 48.299000 ], [ -2.524000, 48.297001 ], [ -2.515000, 48.296001 ], [ -2.506000, 48.293999 ], [ -2.497000, 48.292999 ], [ -2.489000, 48.291000 ], [ -2.480000, 48.290001 ], [ -2.471000, 48.287998 ], [ -2.462000, 48.286999 ], [ -2.454000, 48.285000 ], [ -2.445000, 48.284000 ], [ -2.436000, 48.282001 ], [ -2.427000, 48.280998 ], [ -2.419000, 48.278999 ], [ -2.410000, 48.277000 ], [ -2.401000, 48.276001 ], [ -2.392000, 48.273998 ], [ -2.384000, 48.272999 ], [ -2.375000, 48.271000 ], [ -2.366000, 48.270000 ], [ -2.358000, 48.268002 ], [ -2.349000, 48.266998 ], [ -2.340000, 48.264999 ], [ -2.331000, 48.263000 ], [ -2.325000, 48.262001 ], [ -2.332000, 48.245998 ], [ -2.335000, 48.240002 ], [ -2.337000, 48.234001 ], [ -2.340000, 48.228001 ], [ -2.342000, 48.222000 ], [ -2.345000, 48.216999 ], [ -2.347000, 48.210999 ], [ -2.350000, 48.205002 ], [ -2.352000, 48.199001 ], [ -2.355000, 48.193001 ], [ -2.357000, 48.188000 ], [ -2.360000, 48.181999 ], [ -2.362000, 48.175999 ], [ -2.365000, 48.169998 ], [ -2.368000, 48.165001 ], [ -2.370000, 48.159000 ], [ -2.373000, 48.153000 ], [ -2.376000, 48.146999 ], [ -2.378000, 48.141998 ], [ -2.381000, 48.136002 ], [ -2.384000, 48.130001 ], [ -2.387000, 48.124001 ], [ -2.390000, 48.118999 ], [ -2.392000, 48.112999 ], [ -2.395000, 48.106998 ], [ -2.398000, 48.101002 ], [ -2.401000, 48.096001 ], [ -2.404000, 48.090000 ], [ -2.407000, 48.084000 ], [ -2.409000, 48.077999 ], [ -2.412000, 48.073002 ], [ -2.415000, 48.067001 ], [ -2.418000, 48.061001 ], [ -2.421000, 48.056000 ], [ -2.424000, 48.049999 ], [ -2.427000, 48.043999 ], [ -2.430000, 48.039001 ], [ -2.433000, 48.033001 ], [ -2.436000, 48.027000 ], [ -2.439000, 48.021000 ], [ -2.442000, 48.015999 ], [ -2.445000, 48.009998 ], [ -2.448000, 48.004002 ], [ -2.451000, 47.999001 ], [ -2.454000, 47.993000 ], [ -2.457000, 47.987000 ], [ -2.460000, 47.981998 ], [ -2.463000, 47.976002 ], [ -2.466000, 47.970001 ], [ -2.469000, 47.965000 ], [ -2.472000, 47.959000 ], [ -2.475000, 47.952999 ], [ -2.478000, 47.946999 ], [ -2.481000, 47.942001 ], [ -2.484000, 47.936001 ], [ -2.487000, 47.930000 ], [ -2.490000, 47.924999 ], [ -2.493000, 47.918999 ], [ -2.496000, 47.912998 ], [ -2.499000, 47.908001 ], [ -2.502000, 47.902000 ], [ -2.505000, 47.896000 ], [ -2.508000, 47.890999 ], [ -2.511000, 47.884998 ], [ -2.514000, 47.879002 ], [ -2.517000, 47.874001 ], [ -2.520000, 47.868000 ], [ -2.523000, 47.862000 ], [ -2.526000, 47.856998 ], [ -2.529000, 47.851002 ], [ -2.532000, 47.845001 ], [ -2.535000, 47.840000 ], [ -2.538000, 47.834000 ], [ -2.541000, 47.827999 ], [ -2.544000, 47.821999 ], [ -2.547000, 47.817001 ], [ -2.550000, 47.811001 ], [ -2.553000, 47.805000 ], [ -2.556000, 47.799999 ], [ -2.559000, 47.793999 ], [ -2.562000, 47.787998 ], [ -2.565000, 47.783001 ], [ -2.568000, 47.777000 ], [ -2.570000, 47.771000 ], [ -2.573000, 47.764999 ], [ -2.586000, 47.771000 ], [ -2.594000, 47.773998 ], [ -2.601000, 47.777000 ], [ -2.609000, 47.779999 ], [ -2.617000, 47.783001 ], [ -2.624000, 47.785999 ], [ -2.632000, 47.789001 ], [ -2.640000, 47.792999 ], [ -2.647000, 47.796001 ], [ -2.655000, 47.799000 ], [ -2.663000, 47.801998 ], [ -2.670000, 47.805000 ], [ -2.678000, 47.807999 ], [ -2.686000, 47.811001 ], [ -2.694000, 47.813999 ], [ -2.701000, 47.817001 ], [ -2.709000, 47.820000 ], [ -2.717000, 47.823002 ], [ -2.725000, 47.826000 ], [ -2.732000, 47.828999 ], [ -2.740000, 47.832001 ], [ -2.748000, 47.834999 ], [ -2.755000, 47.838001 ], [ -2.764000, 47.838001 ], [ -2.772000, 47.840000 ], [ -2.781000, 47.842999 ], [ -2.789000, 47.845001 ], [ -2.797000, 47.847000 ], [ -2.805000, 47.849998 ], [ -2.814000, 47.852001 ], [ -2.822000, 47.854000 ], [ -2.831000, 47.855999 ], [ -2.839000, 47.858002 ], [ -2.848000, 47.860001 ], [ -2.856000, 47.862000 ], [ -2.864000, 47.863998 ], [ -2.873000, 47.867001 ], [ -2.881000, 47.868999 ], [ -2.889000, 47.870998 ], [ -2.898000, 47.873001 ], [ -2.906000, 47.875000 ], [ -2.915000, 47.875999 ], [ -2.924000, 47.877998 ], [ -2.932000, 47.879002 ], [ -2.941000, 47.881001 ], [ -2.950000, 47.882000 ], [ -2.958000, 47.883999 ], [ -2.967000, 47.886002 ], [ -2.975000, 47.888000 ], [ -2.984000, 47.889999 ], [ -2.992000, 47.891998 ], [ -3.001000, 47.893002 ], [ -3.010000, 47.895000 ], [ -3.019000, 47.896000 ], [ -3.027000, 47.896999 ], [ -3.036000, 47.897999 ], [ -3.045000, 47.898998 ], [ -3.054000, 47.900002 ], [ -3.063000, 47.901001 ], [ -3.072000, 47.902000 ], [ -3.081000, 47.903000 ], [ -3.089000, 47.903999 ], [ -3.098000, 47.905998 ], [ -3.107000, 47.907001 ], [ -3.115000, 47.909000 ], [ -3.124000, 47.910000 ], [ -3.133000, 47.910999 ], [ -3.142000, 47.912998 ], [ -3.150000, 47.914001 ], [ -3.159000, 47.915001 ], [ -3.168000, 47.917000 ], [ -3.177000, 47.917999 ], [ -3.185000, 47.918999 ], [ -3.194000, 47.921001 ], [ -3.203000, 47.922001 ], [ -3.212000, 47.923000 ], [ -3.220000, 47.924999 ], [ -3.229000, 47.925999 ], [ -3.238000, 47.926998 ], [ -3.247000, 47.929001 ], [ -3.255000, 47.930000 ], [ -3.264000, 47.931000 ], [ -3.273000, 47.932999 ], [ -3.282000, 47.933998 ], [ -3.290000, 47.935001 ], [ -3.299000, 47.937000 ], [ -3.308000, 47.938000 ], [ -3.317000, 47.938999 ], [ -3.326000, 47.941002 ], [ -3.334000, 47.942001 ], [ -3.343000, 47.943001 ], [ -3.352000, 47.944000 ], [ -3.361000, 47.945999 ], [ -3.369000, 47.946999 ], [ -3.378000, 47.948002 ], [ -3.387000, 47.949001 ], [ -3.396000, 47.951000 ], [ -3.405000, 47.952000 ], [ -3.413000, 47.952999 ], [ -3.422000, 47.953999 ], [ -3.431000, 47.956001 ], [ -3.440000, 47.957001 ], [ -3.449000, 47.958000 ], [ -3.457000, 47.959000 ], [ -3.466000, 47.959999 ], [ -3.475000, 47.960999 ], [ -3.484000, 47.963001 ], [ -3.493000, 47.964001 ], [ -3.502000, 47.965000 ], [ -3.510000, 47.966000 ], [ -3.519000, 47.966999 ], [ -3.528000, 47.967999 ], [ -3.537000, 47.969002 ], [ -3.546000, 47.970001 ], [ -3.555000, 47.971001 ], [ -3.563000, 47.972000 ], [ -3.572000, 47.973000 ], [ -3.581000, 47.973999 ], [ -3.590000, 47.974998 ], [ -3.599000, 47.976002 ], [ -3.608000, 47.977001 ], [ -3.617000, 47.978001 ], [ -3.625000, 47.979000 ], [ -3.634000, 47.980000 ], [ -3.643000, 47.980999 ], [ -3.652000, 47.981998 ], [ -3.661000, 47.983002 ], [ -3.670000, 47.984001 ], [ -3.679000, 47.985001 ], [ -3.688000, 47.985001 ], [ -3.697000, 47.986000 ], [ -3.706000, 47.987000 ], [ -3.714000, 47.987999 ], [ -3.723000, 47.988998 ], [ -3.732000, 47.990002 ], [ -3.741000, 47.990002 ], [ -3.750000, 47.991001 ], [ -3.759000, 47.992001 ], [ -3.768000, 47.993000 ], [ -3.777000, 47.993000 ], [ -3.786000, 47.993999 ], [ -3.795000, 47.994999 ], [ -3.804000, 47.995998 ], [ -3.813000, 47.995998 ], [ -3.821000, 47.997002 ], [ -3.830000, 47.998001 ], [ -3.839000, 47.998001 ], [ -3.848000, 47.999001 ], [ -3.857000, 48.000000 ], [ -3.866000, 48.000000 ], [ -3.875000, 48.000999 ], [ -3.884000, 48.001999 ], [ -3.893000, 48.001999 ], [ -3.902000, 48.002998 ], [ -3.911000, 48.004002 ], [ -3.920000, 48.004002 ], [ -3.929000, 48.005001 ], [ -3.938000, 48.006001 ], [ -3.946000, 48.007000 ], [ -3.955000, 48.007999 ], [ -3.964000, 48.007000 ], [ -3.972000, 48.004002 ], [ -3.981000, 48.004002 ], [ -3.989000, 48.007000 ], [ -3.996000, 48.009998 ], [ -4.004000, 48.013000 ], [ -4.012000, 48.015999 ], [ -4.020000, 48.019001 ], [ -4.027000, 48.022999 ], [ -4.035000, 48.026001 ], [ -4.042000, 48.028999 ], [ -4.049000, 48.033001 ] ] ] } }
]
}

Dashed line in Line plus bar chart NVD3

I have added a line in line plus bar chart in NVD3. but i want that added single line in dashed format.
How to do it in linePlusBar chart.
As shown in image Limit line I added but i want this line to be doted or dashed.
Please help me out, how to do it??
As shown in above graph i want orange line to be dashed.
how to do it??
<script>
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart().margin({
top : 50,
right : 80,
bottom : 30,
left : 80
}).legendRightAxisHint(' [Using Right Axis]').color(
d3.scale.category10().range()).options({
focusEnable : false
});
chart.xAxis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
chart.y2Axis.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
chart.bars.forceY([ 0 ]).padData(false);
chart.x2Axis.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
}).showMaxMin(false);
d3.select('#chart1 svg').datum(testdata).transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) {
nv.log('New State:', JSON.stringify(e));
});
return chart;
});
</script>
Data as follows:
var testdata = [
{
"key" : "Quantity",
"bar" : true,
"values" : [ [ 1136005200000, 1271000.0 ],
[ 1138683600000, 1271000.0 ],
[ 1141102800000, 1271000.0 ], [ 1143781200000, 0 ],
[ 1146369600000, 0 ], [ 1149048000000, 0 ],
[ 1151640000000, 0 ], [ 1154318400000, 0 ],
[ 1156996800000, 0 ], [ 1159588800000, 3899486.0 ],
[ 1162270800000, 3899486.0 ],
[ 1164862800000, 3899486.0 ],
[ 1167541200000, 3564700.0 ],
[ 1170219600000, 3564700.0 ],
[ 1172638800000, 3564700.0 ],
[ 1175313600000, 2648493.0 ],
[ 1177905600000, 2648493.0 ],
[ 1180584000000, 2648493.0 ],
[ 1183176000000, 2522993.0 ],
[ 1185854400000, 2522993.0 ],
[ 1188532800000, 2522993.0 ],
[ 1191124800000, 2906501.0 ],
[ 1193803200000, 2906501.0 ],
[ 1196398800000, 2906501.0 ],
[ 1199077200000, 2206761.0 ],
[ 1201755600000, 2206761.0 ],
[ 1204261200000, 2206761.0 ],
[ 1206936000000, 2287726.0 ],
[ 1209528000000, 2287726.0 ],
[ 1212206400000, 2287726.0 ],
[ 1214798400000, 2732646.0 ],
[ 1217476800000, 2732646.0 ],
[ 1220155200000, 2732646.0 ],
[ 1222747200000, 2599196.0 ],
[ 1225425600000, 2599196.0 ],
[ 1228021200000, 2599196.0 ],
[ 1230699600000, 1924387.0 ],
[ 1233378000000, 1924387.0 ],
[ 1235797200000, 1924387.0 ],
[ 1238472000000, 1756311.0 ],
[ 1241064000000, 1756311.0 ],
[ 1243742400000, 1756311.0 ],
[ 1246334400000, 1743470.0 ],
[ 1249012800000, 1743470.0 ],
[ 1251691200000, 1743470.0 ],
[ 1254283200000, 1519010.0 ],
[ 1256961600000, 1519010.0 ],
[ 1259557200000, 1519010.0 ],
[ 1262235600000, 1591444.0 ],
[ 1264914000000, 1591444.0 ],
[ 1267333200000, 1591444.0 ],
[ 1270008000000, 1543784.0 ],
[ 1272600000000, 1543784.0 ],
[ 1275278400000, 1543784.0 ],
[ 1277870400000, 1309915.0 ],
[ 1280548800000, 1309915.0 ],
[ 1283227200000, 1309915.0 ],
[ 1285819200000, 1331875.0 ],
[ 1288497600000, 1331875.0 ],
[ 1291093200000, 1331875.0 ],
[ 1293771600000, 1331875.0 ],
[ 1296450000000, 1154695.0 ],
[ 1298869200000, 1154695.0 ],
[ 1301544000000, 1194025.0 ],
[ 1304136000000, 1194025.0 ],
[ 1306814400000, 1194025.0 ],
[ 1309406400000, 1194025.0 ],
[ 1312084800000, 1194025.0 ],
[ 1314763200000, 1244525.0 ],
[ 1317355200000, 475000.0 ],
[ 1320033600000, 475000.0 ],
[ 1322629200000, 475000.0 ],
[ 1325307600000, 690033.0 ],
[ 1327986000000, 690033.0 ],
[ 1330491600000, 690033.0 ],
[ 1333166400000, 514733.0 ],
[ 1335758400000, 514733.0 ] ]
},
{
"key" : "Limit",
"values" : [ [ 1136005200000, 500 ], [ 1335758400000, 500 ] ],
classed : 'dashed'
},
{
"key" : "Price",
"values" : [ [ 1136005200000, 71.89 ],
[ 1138683600000, 75.51 ], [ 1141102800000, 68.49 ],
[ 1143781200000, 62.72 ], [ 1146369600000, 70.39 ],
[ 1149048000000, 59.77 ], [ 1151640000000, 57.27 ],
[ 1154318400000, 67.96 ], [ 1156996800000, 67.85 ],
[ 1159588800000, 76.98 ], [ 1162270800000, 81.08 ],
[ 1164862800000, 91.66 ], [ 1167541200000, 84.84 ],
[ 1170219600000, 85.73 ], [ 1172638800000, 84.61 ],
[ 1175313600000, 92.91 ], [ 1177905600000, 99.8 ],
[ 1180584000000, 121.191 ],
[ 1183176000000, 122.04 ],
[ 1185854400000, 131.76 ],
[ 1188532800000, 138.48 ],
[ 1191124800000, 153.47 ],
[ 1193803200000, 189.95 ],
[ 1196398800000, 182.22 ],
[ 1199077200000, 198.08 ],
[ 1201755600000, 135.36 ],
[ 1204261200000, 125.02 ],
[ 1206936000000, 143.5 ],
[ 1209528000000, 173.95 ],
[ 1212206400000, 188.75 ],
[ 1214798400000, 167.44 ],
[ 1217476800000, 158.95 ],
[ 1220155200000, 169.53 ],
[ 1222747200000, 113.66 ],
[ 1225425600000, 107.59 ],
[ 1228021200000, 92.67 ], [ 1230699600000, 85.35 ],
[ 1233378000000, 90.13 ], [ 1235797200000, 89.31 ],
[ 1238472000000, 105.12 ],
[ 1241064000000, 125.83 ],
[ 1243742400000, 135.81 ],
[ 1246334400000, 142.43 ],
[ 1249012800000, 163.39 ],
[ 1251691200000, 168.21 ],
[ 1254283200000, 185.35 ],
[ 1256961600000, 188.5 ],
[ 1259557200000, 199.91 ],
[ 1262235600000, 210.732 ],
[ 1264914000000, 192.063 ],
[ 1267333200000, 204.62 ],
[ 1270008000000, 235.0 ],
[ 1272600000000, 261.09 ],
[ 1275278400000, 256.88 ],
[ 1277870400000, 251.53 ],
[ 1280548800000, 257.25 ],
[ 1283227200000, 243.1 ],
[ 1285819200000, 283.75 ],
[ 1288497600000, 300.98 ],
[ 1291093200000, 311.15 ],
[ 1293771600000, 322.56 ],
[ 1296450000000, 339.32 ],
[ 1298869200000, 353.21 ],
[ 1301544000000, 348.5075 ],
[ 1304136000000, 350.13 ],
[ 1306814400000, 347.83 ],
[ 1309406400000, 335.67 ],
[ 1312084800000, 390.48 ],
[ 1314763200000, 384.83 ],
[ 1317355200000, 381.32 ],
[ 1320033600000, 404.78 ],
[ 1322629200000, 382.2 ], [ 1325307600000, 405.0 ],
[ 1327986000000, 456.48 ],
[ 1330491600000, 542.44 ],
[ 1333166400000, 599.55 ],
[ 1335758400000, 583.98 ] ]
} ]
You can do this with CSS. For instance if you wanted the 2nd line dashed:
<style>
.nv-series-1>path {
stroke-dasharray: 3,3;
}
</style>

[Leaflet]How to change Map and its Border?

Good Evening too Everyone!
I have a website that has a Leaflet Map that is focused on an area and that area is bordered.The bordered area is editable and whats outside of that area is the whole world which is not editable. If you where not cleared here is sample.
It is a Leaflet Map that is focused on an area and that area is bordered.
and the code for that is here
CODE
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
</script>
<script>
// credits: https://github.com/turban/Leaflet.Mask
L.Mask = L.Polygon.extend({
options: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true,
outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
},
initialize: function (latLngs, options) {
var outerBoundsLatLngs = [
this.options.outerBounds.getSouthWest(),
this.options.outerBounds.getNorthWest(),
this.options.outerBounds.getNorthEast(),
this.options.outerBounds.getSouthEast()
];
L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);
},
});
L.mask = function (latLngs, options) {
return new L.Mask(latLngs, options);
};
// Polygon created with http://geojson.io/
var france = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.0207986831665,
14.71238001066067
],
[
121.02015495300293,
14.71200643586981
],
[
121.01968288421631,
14.712338502382146
],
[
121.01908206939697,
14.712421518931281
],
[
121.0184383392334,
14.712172469189156
],
[
121.0180950164795,
14.711715877256967
],
[
121.01775169372559,
14.71113475887066
],
[
121.01766586303711,
14.710512130310955
],
[
121.01783752441405,
14.709681956134785
],
[
121.01818084716797,
14.708810269851188
],
[
121.01886749267578,
14.707648016057705
],
[
121.01895332336426,
14.70611217119577
],
[
121.01818084716797,
14.705198961020216
],
[
121.01792335510252,
14.704742354499942
],
[
121.01783752441405,
14.704161217547579
],
[
121.01818084716797,
14.703663098928693
],
[
121.01818084716797,
14.703497059136536
],
[
121.0185670852661,
14.703663098928693
],
[
121.01912498474121,
14.703331019218112
],
[
121.01989746093749,
14.703538569096404
],
[
121.02054119110106,
14.70370460885701
],
[
121.02161407470703,
14.703912158380186
],
[
121.0215711593628,
14.70436876663671
],
[
121.02178573608397,
14.704410276430858
],
[
121.02195739746092,
14.703497059136536
],
[
121.02230072021484,
14.702417797409819
],
[
121.02380275726317,
14.702293266867338
],
[
121.02569103240967,
14.702168736253803
],
[
121.02646350860594,
14.701878164546082
],
[
121.02706432342528,
14.700757384337317
],
[
121.02805137634277,
14.700259257953755
],
[
121.02899551391602,
14.699179980225122
],
[
121.02981090545653,
14.699179980225122
],
[
121.03191375732423,
14.699138469436718
],
[
121.03272914886475,
14.699076203239365
],
[
121.03275060653685,
14.699449800157279
],
[
121.03339433670043,
14.69963659837658
],
[
121.03414535522461,
14.699595087674995
],
[
121.03498220443726,
14.69976113043405
],
[
121.03519678115845,
14.69976113043405
],
[
121.03528261184691,
14.69984415176623
],
[
121.03601217269896,
14.699449800157279
],
[
121.03624820709227,
14.699179980225122
],
[
121.03901624679565,
14.69996868370533
],
[
121.03953123092651,
14.699512066248136
],
[
121.0398530960083,
14.699366778675191
],
[
121.04068994522093,
14.699781885770053
],
[
121.04114055633545,
14.699532821607814
],
[
121.0413122177124,
14.699283757161554
],
[
121.04171991348267,
14.699408289420186
],
[
121.0417413711548,
14.699574332321244
],
[
121.04339361190797,
14.700487566020588
],
[
121.0443377494812,
14.699532821607814
],
[
121.04448795318604,
14.699449800157279
],
[
121.04633331298827,
14.700549831815577
],
[
121.04828596115112,
14.699449800157279
],
[
121.04929447174072,
14.700051704958621
],
[
121.04968070983888,
14.700591342335706
],
[
121.04944467544556,
14.70121399919081
],
[
121.04987382888793,
14.702625348156174
],
[
121.0497236251831,
14.702791388611221
],
[
121.04920864105225,
14.70277063356125
],
[
121.0489296913147,
14.702293266867338
],
[
121.04762077331542,
14.70254232788131
],
[
121.04611873626708,
14.703642343961583
],
[
121.0454750061035,
14.704804619081676
],
[
121.04521751403809,
14.704991412720306
],
[
121.04508876800537,
14.705219715839354
],
[
121.04195594787598,
14.705240470656518
],
[
121.0413122177124,
14.707212169289635
],
[
121.04124784469603,
14.707648016057705
],
[
121.03998184204102,
14.708208389195038
],
[
121.03970289230347,
14.708104616500359
],
[
121.03871583938597,
14.708540461486441
],
[
121.0380506515503,
14.709308376725264
],
[
121.03729963302611,
14.709183850113313
],
[
121.03691339492798,
14.708976305602194
],
[
121.03669881820677,
14.70910083233254
],
[
121.03644132614136,
14.70910083233254
],
[
121.03607654571533,
14.709453657682731
],
[
121.03358745574951,
14.709744219307547
],
[
121.03341579437256,
14.710408358711632
],
[
121.0334587097168,
14.710532884624905
],
[
121.03257894515991,
14.710740427655768
],
[
121.03169918060301,
14.710761181948001
],
[
121.03107690811157,
14.71049137599503
],
[
121.03081941604613,
14.710636656165004
],
[
121.0309910774231,
14.711363055564133
],
[
121.03090524673463,
14.711757385653923
],
[
121.03021860122679,
14.71238001066067
],
[
121.03002548217773,
14.713210174572755
],
[
121.0294461250305,
14.714164859166916
],
[
121.02940320968627,
14.714621445974403
],
[
121.02946758270264,
14.714808231211153
],
[
121.02918863296509,
14.715327078251933
],
[
121.02910280227661,
14.715513862884555
],
[
121.02882385253906,
14.715700647357233
],
[
121.0284376144409,
14.715742154996123
],
[
121.02777242660522,
14.71607421582282
],
[
121.02704286575317,
14.71621949227558
],
[
121.02564811706543,
14.716862858260502
],
[
121.0254120826721,
14.71694587308808
],
[
121.02513313293456,
14.716904365678229
],
[
121.02459669113159,
14.71644778364871
],
[
121.02384567260741,
14.716800597119072
],
[
121.02365255355836,
14.716759089681588
],
[
121.02330923080444,
14.716364768631571
],
[
121.02230072021484,
14.715887431669993
],
[
121.02191448211669,
14.715534616722733
],
[
121.0215711593628,
14.712919617562784
],
[
121.02139949798585,
14.712712076604523
],
[
121.02120637893677,
14.71252528957328
],
[
121.0207986831665,
14.71238001066067
]
]
]
}
}
]
};
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 18, attribution: osmAttrib});
map.addLayer(osm);
map.setView([14.7079279,121.0315007],15);
// transform geojson coordinates into an array of L.LatLng
var coordinates = france.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}
L.mask(latLngs).addTo(map);
var layerpoly = new L.geoJson(france.features,myStyle).addTo(map);
var myStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.001,
};
</script>
Now I have a little code below and that codes purpose is to generate a border of an another map.
LAT/LONG of the 2nd Map: 14.7180247,121.0502252
Here is the code for the border of the 2nd Map
CODE
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.04564666748045,
14.730808905988164
],
[
121.04556083679198,
14.729376986829836
],
[
121.04515314102171,
14.729376986829836
],
[
121.04483127593993,
14.729127956450599
],
[
121.0447883605957,
14.727218714090242
],
[
121.04315757751465,
14.726803659190255
],
[
121.04324340820312,
14.726222581002583
],
[
121.04485273361206,
14.726720648115412
],
[
121.04867219924928,
14.727197961364011
],
[
121.04860782623291,
14.720868287675927
],
[
121.04712724685668,
14.720951300978989
],
[
121.04708433151245,
14.719457056689269
],
[
121.04712724685668,
14.718917465957539
],
[
121.04755640029907,
14.718232598875604
],
[
121.04815721511841,
14.718792944829868
],
[
121.04913353919983,
14.717682628298446
],
[
121.05102181434631,
14.719311782392825
],
[
121.05281352996825,
14.717039264731355
],
[
121.05459451675416,
14.718481641699666
],
[
121.05769515037538,
14.714445037548428
],
[
121.05461597442627,
14.711944173342486
],
[
121.05950832366945,
14.706081039093599
],
[
121.05897188186644,
14.7055621700703
],
[
121.05849981307982,
14.70578009521028
],
[
121.0579526424408,
14.705302735096184
],
[
121.0577917098999,
14.705167828787806
],
[
121.05709433555603,
14.70540650912283
],
[
121.05606436729431,
14.70654802016014
],
[
121.05544209480286,
14.70749235659759
],
[
121.0555064678192,
14.707824429978333
],
[
121.054927110672,
14.708540461486441
],
[
121.05369329452513,
14.708696120199113
],
[
121.05327486991882,
14.70891404221037
],
[
121.05248093605042,
14.709080077882422
],
[
121.05218052864075,
14.709557429735995
],
[
121.05213761329652,
14.709692333331473
],
[
121.05172991752623,
14.709412148847598
],
[
121.05132222175597,
14.709723464918598
],
[
121.05082869529724,
14.710532884624905
],
[
121.0497236251831,
14.710325341396656
],
[
121.04926228523253,
14.710460244517469
],
[
121.04888677597046,
14.710180061019438
],
[
121.04822158813475,
14.709671578937602
],
[
121.04772806167603,
14.710014026184215
],
[
121.04685902595521,
14.709982894638525
],
[
121.04612946510314,
14.710045157725437
],
[
121.04605436325075,
14.710211192536972
],
[
121.04620456695555,
14.710615901860939
],
[
121.04678392410278,
14.710916839076834
],
[
121.04711651802063,
14.71135267844687
],
[
121.04681611061095,
14.711985681695994
],
[
121.04615092277527,
14.71256679781626
],
[
121.04567885398863,
14.712857355296048
],
[
121.04526042938232,
14.712940371647761
],
[
121.04483127593993,
14.712784715962366
],
[
121.04371547698976,
14.712037567126806
],
[
121.04352235794067,
14.712016812955968
],
[
121.04323267936708,
14.712317748239931
],
[
121.04296445846558,
14.712763961862594
],
[
121.0429000854492,
14.713013010929627
],
[
121.04325413703918,
14.713625255344366
],
[
121.04298591613768,
14.714465791488294
],
[
121.04295372962952,
14.714943131560467
],
[
121.04322195053099,
14.715347832107897
],
[
121.04357600212097,
14.715596878225487
],
[
121.04401588439941,
14.715783662627086
],
[
121.0443377494812,
14.715939316172935
],
[
121.04429483413696,
14.716115723390619
],
[
121.04398369789122,
14.71654117550522
],
[
121.04397296905518,
14.716873235115676
],
[
121.04389786720276,
14.71720529422065
],
[
121.04364037513733,
14.718253352455127
],
[
121.04346871376036,
14.71875143777152
],
[
121.04325413703918,
14.718803321593224
],
[
121.04286789894103,
14.718595786232333
],
[
121.04257822036742,
14.718377873890866
],
[
121.04224562644958,
14.718346743538586
],
[
121.04183793067932,
14.718429757801436
],
[
121.04144096374512,
14.718917465957539
],
[
121.04116201400757,
14.719073117267152
],
[
121.04107618331909,
14.719560823984638
],
[
121.04078650474548,
14.720214556810097
],
[
121.04055047035217,
14.721283353875215
],
[
121.04040026664732,
14.721771055649866
],
[
121.04033589363098,
14.721905951692825
],
[
121.04169845581053,
14.722227626535446
],
[
121.04141950607301,
14.723846370153696
],
[
121.04120492935179,
14.725734889185244
],
[
121.04133367538451,
14.726471614701252
],
[
121.04179501533508,
14.72843274513597
],
[
121.04243874549866,
14.728961936039699
],
[
121.04518532752991,
14.730757025023513
],
[
121.04564666748045,
14.730808905988164
]
]
]
}
}
]
}
The output of 2nd code above must be the picture in the link above
The 1st Code and the 2nd Code above has the same output but diff area and border shape. Now my question is if i press button area 1 the map will go to area 1 with border and if i press button area 2 it will go to area 2 with border.
Simple Question: change map area and border during button click
Depending on how memory concious you want to be, I see two options:
Draw both polygons on the map, and then map.setView() to either area based on the button clicked.
or, draw one polygon, call map.setView() to the relevant area and remove the other area poly using map.removeLayer()
Some sample jquery:
$('#buttonArea1,#buttonArea2').click(function(){
// Add/remove the relevant poly, based on the button pressed
if(this.id == 'buttonArea1')
{
var polygon = L.polygon(poly[1]).addTo(map);
map.removeLayer(poly[2]);
}else{
var polygon = L.polygon(poly[2]).addTo(map);
map.removeLayer(poly[1]);
}
// Move the map view to the specified area
map.setView(mapView[this.id]);
});
Of course, mapView and poly are both arrays holding the coords and polygon, respectively.

[Leaflet]How to remove unwanted borders in map?

Good Morning to all
I just want to share my little problem with this,There is an annoying border shaped triangle in the middle of the map you can take a look in it if you want.
http://i57.tinypic.com/11lju3n.jpg
Here is my code
</script>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js">
</script>
<script>
// credits: https://github.com/turban/Leaflet.Mask
L.Mask = L.Polygon.extend({
options: {
stroke: false,
color: '#333',
fillOpacity: 0.5,
clickable: true,
outerBounds: new L.LatLngBounds([-90, -360], [90, 360])
},
initialize: function (latLngs, options) {
var outerBoundsLatLngs = [
this.options.outerBounds.getSouthWest(),
this.options.outerBounds.getNorthWest(),
this.options.outerBounds.getNorthEast(),
this.options.outerBounds.getSouthEast()
];
L.Polygon.prototype.initialize.call(this, [outerBoundsLatLngs, latLngs], options);
},
});
L.mask = function (latLngs, options) {
return new L.Mask(latLngs, options);
};
var sanbartolome = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.0207986831665,
14.71238001066067
],
[
121.02015495300293,
14.71200643586981
],
[
121.01968288421631,
14.712338502382146
],
[
121.01908206939697,
14.712421518931281
],
[
121.0184383392334,
14.712172469189156
],
[
121.0180950164795,
14.711715877256967
],
[
121.01775169372559,
14.71113475887066
],
[
121.01766586303711,
14.710512130310955
],
[
121.01783752441405,
14.709681956134785
],
[
121.01818084716797,
14.708810269851188
],
[
121.01886749267578,
14.707648016057705
],
[
121.01895332336426,
14.70611217119577
],
[
121.01818084716797,
14.705198961020216
],
[
121.01792335510252,
14.704742354499942
],
[
121.01783752441405,
14.704161217547579
],
[
121.01818084716797,
14.703663098928693
],
[
121.01818084716797,
14.703497059136536
],
[
121.0185670852661,
14.703663098928693
],
[
121.01912498474121,
14.703331019218112
],
[
121.01989746093749,
14.703538569096404
],
[
121.02054119110106,
14.70370460885701
],
[
121.02161407470703,
14.703912158380186
],
[
121.0215711593628,
14.70436876663671
],
[
121.02178573608397,
14.704410276430858
],
[
121.02195739746092,
14.703497059136536
],
[
121.02230072021484,
14.702417797409819
],
[
121.02380275726317,
14.702293266867338
],
[
121.02569103240967,
14.702168736253803
],
[
121.02646350860594,
14.701878164546082
],
[
121.02706432342528,
14.700757384337317
],
[
121.02805137634277,
14.700259257953755
],
[
121.02899551391602,
14.699179980225122
],
[
121.02981090545653,
14.699179980225122
],
[
121.03191375732423,
14.699138469436718
],
[
121.03272914886475,
14.699076203239365
],
[
121.03275060653685,
14.699449800157279
],
[
121.03339433670043,
14.69963659837658
],
[
121.03414535522461,
14.699595087674995
],
[
121.03498220443726,
14.69976113043405
],
[
121.03519678115845,
14.69976113043405
],
[
121.03528261184691,
14.69984415176623
],
[
121.03601217269896,
14.699449800157279
],
[
121.03624820709227,
14.699179980225122
],
[
121.03901624679565,
14.69996868370533
],
[
121.03953123092651,
14.699512066248136
],
[
121.0398530960083,
14.699366778675191
],
[
121.04068994522093,
14.699781885770053
],
[
121.04114055633545,
14.699532821607814
],
[
121.0413122177124,
14.699283757161554
],
[
121.04171991348267,
14.699408289420186
],
[
121.0417413711548,
14.699574332321244
],
[
121.04339361190797,
14.700487566020588
],
[
121.0443377494812,
14.699532821607814
],
[
121.04448795318604,
14.699449800157279
],
[
121.04633331298827,
14.700549831815577
],
[
121.04828596115112,
14.699449800157279
],
[
121.04929447174072,
14.700051704958621
],
[
121.04968070983888,
14.700591342335706
],
[
121.04944467544556,
14.70121399919081
],
[
121.04987382888793,
14.702625348156174
],
[
121.0497236251831,
14.702791388611221
],
[
121.04920864105225,
14.70277063356125
],
[
121.0489296913147,
14.702293266867338
],
[
121.04762077331542,
14.70254232788131
],
[
121.04611873626708,
14.703642343961583
],
[
121.0454750061035,
14.704804619081676
],
[
121.04521751403809,
14.704991412720306
],
[
121.04508876800537,
14.705219715839354
],
[
121.04195594787598,
14.705240470656518
],
[
121.0413122177124,
14.707212169289635
],
[
121.04124784469603,
14.707648016057705
],
[
121.03998184204102,
14.708208389195038
],
[
121.03970289230347,
14.708104616500359
],
[
121.03871583938597,
14.708540461486441
],
[
121.0380506515503,
14.709308376725264
],
[
121.03729963302611,
14.709183850113313
],
[
121.03691339492798,
14.708976305602194
],
[
121.03669881820677,
14.70910083233254
],
[
121.03644132614136,
14.70910083233254
],
[
121.03607654571533,
14.709453657682731
],
[
121.03358745574951,
14.709744219307547
],
[
121.03341579437256,
14.710408358711632
],
[
121.0334587097168,
14.710532884624905
],
[
121.03257894515991,
14.710740427655768
],
[
121.03169918060301,
14.710761181948001
],
[
121.03107690811157,
14.71049137599503
],
[
121.03081941604613,
14.710636656165004
],
[
121.0309910774231,
14.711363055564133
],
[
121.03090524673463,
14.711757385653923
],
[
121.03021860122679,
14.71238001066067
],
[
121.03002548217773,
14.713210174572755
],
[
121.0294461250305,
14.714164859166916
],
[
121.02940320968627,
14.714621445974403
],
[
121.02946758270264,
14.714808231211153
],
[
121.02918863296509,
14.715327078251933
],
[
121.02910280227661,
14.715513862884555
],
[
121.02882385253906,
14.715700647357233
],
[
121.0284376144409,
14.715742154996123
],
[
121.02777242660522,
14.71607421582282
],
[
121.02704286575317,
14.71621949227558
],
[
121.02564811706543,
14.716862858260502
],
[
121.0254120826721,
14.71694587308808
],
[
121.02513313293456,
14.716904365678229
],
[
121.02459669113159,
14.71644778364871
],
[
121.02384567260741,
14.716800597119072
],
[
121.02365255355836,
14.716759089681588
],
[
121.02330923080444,
14.716364768631571
],
[
121.02230072021484,
14.715887431669993
],
[
121.02191448211669,
14.715534616722733
],
[
121.0215711593628,
14.712919617562784
],
[
121.02139949798585,
14.712712076604523
],
[
121.02120637893677,
14.71252528957328
],
[
121.0207986831665,
14.71238001066067
]
]
]
}
}
]
};
var santamonoica = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.04564666748045,
14.730808905988164
],
[
121.04556083679198,
14.729376986829836
],
[
121.04515314102171,
14.729376986829836
],
[
121.04483127593993,
14.729127956450599
],
[
121.0447883605957,
14.727218714090242
],
[
121.04315757751465,
14.726803659190255
],
[
121.04324340820312,
14.726222581002583
],
[
121.04485273361206,
14.726720648115412
],
[
121.04867219924928,
14.727197961364011
],
[
121.04860782623291,
14.720868287675927
],
[
121.04712724685668,
14.720951300978989
],
[
121.04708433151245,
14.719457056689269
],
[
121.04712724685668,
14.718917465957539
],
[
121.04755640029907,
14.718232598875604
],
[
121.04815721511841,
14.718792944829868
],
[
121.04913353919983,
14.717682628298446
],
[
121.05102181434631,
14.719311782392825
],
[
121.05281352996825,
14.717039264731355
],
[
121.05459451675416,
14.718481641699666
],
[
121.05769515037538,
14.714445037548428
],
[
121.05461597442627,
14.711944173342486
],
[
121.05950832366945,
14.706081039093599
],
[
121.05897188186644,
14.7055621700703
],
[
121.05849981307982,
14.70578009521028
],
[
121.0579526424408,
14.705302735096184
],
[
121.0577917098999,
14.705167828787806
],
[
121.05709433555603,
14.70540650912283
],
[
121.05606436729431,
14.70654802016014
],
[
121.05544209480286,
14.70749235659759
],
[
121.0555064678192,
14.707824429978333
],
[
121.054927110672,
14.708540461486441
],
[
121.05369329452513,
14.708696120199113
],
[
121.05327486991882,
14.70891404221037
],
[
121.05248093605042,
14.709080077882422
],
[
121.05218052864075,
14.709557429735995
],
[
121.05213761329652,
14.709692333331473
],
[
121.05172991752623,
14.709412148847598
],
[
121.05132222175597,
14.709723464918598
],
[
121.05082869529724,
14.710532884624905
],
[
121.0497236251831,
14.710325341396656
],
[
121.04926228523253,
14.710460244517469
],
[
121.04888677597046,
14.710180061019438
],
[
121.04822158813475,
14.709671578937602
],
[
121.04772806167603,
14.710014026184215
],
[
121.04685902595521,
14.709982894638525
],
[
121.04612946510314,
14.710045157725437
],
[
121.04605436325075,
14.710211192536972
],
[
121.04620456695555,
14.710615901860939
],
[
121.04678392410278,
14.710916839076834
],
[
121.04711651802063,
14.71135267844687
],
[
121.04681611061095,
14.711985681695994
],
[
121.04615092277527,
14.71256679781626
],
[
121.04567885398863,
14.712857355296048
],
[
121.04526042938232,
14.712940371647761
],
[
121.04483127593993,
14.712784715962366
],
[
121.04371547698976,
14.712037567126806
],
[
121.04352235794067,
14.712016812955968
],
[
121.04323267936708,
14.712317748239931
],
[
121.04296445846558,
14.712763961862594
],
[
121.0429000854492,
14.713013010929627
],
[
121.04325413703918,
14.713625255344366
],
[
121.04298591613768,
14.714465791488294
],
[
121.04295372962952,
14.714943131560467
],
[
121.04322195053099,
14.715347832107897
],
[
121.04357600212097,
14.715596878225487
],
[
121.04401588439941,
14.715783662627086
],
[
121.0443377494812,
14.715939316172935
],
[
121.04429483413696,
14.716115723390619
],
[
121.04398369789122,
14.71654117550522
],
[
121.04397296905518,
14.716873235115676
],
[
121.04389786720276,
14.71720529422065
],
[
121.04364037513733,
14.718253352455127
],
[
121.04346871376036,
14.71875143777152
],
[
121.04325413703918,
14.718803321593224
],
[
121.04286789894103,
14.718595786232333
],
[
121.04257822036742,
14.718377873890866
],
[
121.04224562644958,
14.718346743538586
],
[
121.04183793067932,
14.718429757801436
],
[
121.04144096374512,
14.718917465957539
],
[
121.04116201400757,
14.719073117267152
],
[
121.04107618331909,
14.719560823984638
],
[
121.04078650474548,
14.720214556810097
],
[
121.04055047035217,
14.721283353875215
],
[
121.04040026664732,
14.721771055649866
],
[
121.04033589363098,
14.721905951692825
],
[
121.04169845581053,
14.722227626535446
],
[
121.04141950607301,
14.723846370153696
],
[
121.04120492935179,
14.725734889185244
],
[
121.04133367538451,
14.726471614701252
],
[
121.04179501533508,
14.72843274513597
],
[
121.04243874549866,
14.728961936039699
],
[
121.04518532752991,
14.730757025023513
],
[
121.04564666748045,
14.730808905988164
]
]
]
}
}
]
};
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 15, maxZoom: 18, attribution: osmAttrib});
map.addLayer(osm);
map.setView([14.7053533,121.031448],15);
var coordinates = sanbartolome.features[0].geometry.coordinates[0];
var coordinates1 = santamonoica.features[0].geometry.coordinates[0];
var coordinates2 = sanagustin.features[0].geometry.coordinates[0];
var latLngs = [];
for (i=0; i<coordinates.length; i++) {
latLngs.push(new L.LatLng(coordinates[i][1], coordinates[i][0]));
}
for (i=0; i<coordinates1.length; i++) {
latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}
for (i=0; i<coordinates2.length; i++) {
latLngs.push(new L.LatLng(coordinates1[i][1], coordinates1[i][0]));
}
L.mask(latLngs).addTo(map);
var options = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "red",
"fillOpacity": 0.5
};
}
};
var options1 = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "blue",
"fillOpacity": 0.5
};
}
};
var options2 = {
style: function (feature) {
return {
"color": "yellow",
"weight": 5,
"opacity": 0.001,
"fillColor": "green",
"fillOpacity": 0.5
};
}
};
var layerpoly = new L.geoJson(sanbartolome.features,options).addTo(map);
var layerpoly1 = new L.geoJson(santamonoica.features,options1).addTo(map);
var layerpoly2 = new L.geoJson(sanagustin.features,options2).addTo(map);
My question here is that how can i remove the unwanted part on the middle? any help? ty
Remove L.mask(latLngs).addTo(map);

Categories