Raster reprojection with D3 - dictionary

I'm trying to get my head around raster reprojection using D3's geo class and am a bit stuck.
This is a copy of Mike Bostock's original code found here. When running on my localhost the map is only showing a small portion around Alaska and British Columbia but the rest is blank. When using D3's orthographic projection I get the same problem as well. Also, I've tried using a Geotif file but that didn't load. Does the image have to be in JPEG format? Thanks in advance, Tom

If you open the JavaScript console, you’ll see a SecurityError:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. bl.ocks.org:1
Uncaught Error: SecurityError: DOM Exception 18
Canvas is subject to the same-origin policy. Unless the image you are loading has the Access-Control-Allow-Origin header set, as soon as you draw the image from eoimages.gsfc.nasa.gov into the canvas, the canvas becomes tainted. You are not allowed to read pixel values from a tainted canvas (because it could leak private information to a third-party).
You need to host a copy of this image on the same-domain as your page (e.g., the blue-marble.jpg used in the other example). Alternatively you could petition NASA to enable CORS on their server, but that might take a while.

Related

Draw Google static map image

I am using google static map API for draw google maps image in my Angularjs Application.
https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap
&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318
&markers=color:red|label:C|40.718217,-73.998284
&key=YOUR_API_KEY
Its working fine for low number of map coordinate. But if have large number of map coordinate then it is not drawing map image.
for e.g. following will draw image for low number of coordinate but if i increase that size then it will not draw.
Static-image
Edit:-
I am getting error for this Google Map Image URL
<img src="https://maps.googleapis.com/maps/api/staticmap?size=250x200&path=color:0xff0000ff|weight:244.30293238565196,-68.2665974476563|44.26430994731785,-68.59496553374657|44.20606070761473,-69.06737764312157|44.147753811174056,-69.53978975249657|44.089389261368325,-70.01220186187157|43.936105944717674,-70.34179170562157|43.82445052728625,-70.37201176400083|43.73164134868192,-70.41046391243833|43.64663847098533,-70.47638188118833|43.57743518513326,-70.66314945931333|43.44437361651832,-70.72906742806333|43.23502731999249,-71.00372563118833|43.233426444457265,-71.41571293587583|43.17977400492627,-71.70135746712583|43.04583797528442,-72.02545414681333|42.89148948825737,-72.45941410775083|43.060861371343265,-73.004150390625|43.11381613521644,-73.641357421875|42.95803046045969,-74.520263671875|43.05925574419876,-75.179443359375|43.07209774714582,-75.838623046875|43.060861003899674,-76.409912109375|43.04159327590035,-76.6845703125|42.96606994513872,-77.1240234375|42.995004641918136,-77.607421875|43.023925721405675,-78.0908203125|42.99661158276462,-78.826904296875|43.129853405408575,-79.189453125|43.08413444433945,-79.2498779296875|43.03436614889081,-79.2333984375|42.95642183628041,-79.2828369140625|42.87837867059265,-79.332275390625|42.91298726881428,-79.530029296875|42.94757644320124,-79.6673583984375|42.95802978568438,-79.8486328125|42.85180523556103,-80.15625|42.82199730461899,-80.39794921875|42.856637519467114,-80.6121826171875|42.794593516370284,-80.8319091796875|42.7849186816881,-81.068115234375|42.77524233477264,-81.3043212890625|42.57169053620841,-81.54052734375|42.39993233071362,-81.80419921875|42.33743170402784,-81.97998046875|42.266739300090855,-82.06787109375|42.151185850682765,-82.3260498046875|42.084361523979666,-82.496337890625|42.31787163983394,-83.04150072288871|43.150630239407846,-82.55810228538871|43.65508864481128,-81.87694994163871|43.80750962183118,-80.91015306663871|44.16480237740625,-79.61376634788871|44.268738635035874,-78.73486009788871|43.97851946417654,-78.40822311680358|44.06699784978547,-77.77101608555358|44.20261832258035,-76.87013717930358|44.38703098507651,-76.56182687398285|44.66586537627746,-76.27618234273285|44.92781048570904,-76.03448312398285|45.350934970260454,-75.80377023335785|45.53285201085261,-75.27642648335785|45.614369581554406,-74.91387765523285|45.62666378279735,-74.44146554585785|45.73105618069394,-74.01299874898285|46.11013137338405,-74.33160226460785|46.13754402785938,-74.63921945210785|46.263442671779885,-74.50927734375|46.34422166043787,-74.3829345703125|46.39576937322028,-74.2620849609375|46.4131936539471,-74.1192626953125|46.449539361120124,-73.9544677734375|46.48586083134607,-73.7896728515625|46.52215806620057,-73.6248779296875|46.59618976940811,-73.487548828125|46.71350244599995,-73.4271240234375|46.741691567222,-73.2183837890625|46.770293402903384,-73.0645751953125|46.758679967095574,-72.8173828125|47.16307181424742,-73.1529808779452|47.16307181424742,-73.6363793154452|47.03593412582499,-74.0538597841952|46.90849280227558,-74.4713402529452|46.780747750452306,-74.8888207216952|46.652698883018346,-75.3063011904452|46.52434611849189,-75.7237816591952|46.395689381290765,-76.1412621279452|46.26672860177734,-76.5587425966952|46.13746371630336,-76.9762230654452|46.00789466725463,-77.3937035341952|45.878021403096156,-77.8111840029452|45.836454050187726,-78.387451171875|45.706179285330855,-78.804931640625|45.50634690108343,-79.1015625|45.437008288673916,-79.29931640625|45.3212543611715,-79.82666015625|45.20526345616242,-80.35400390625|45.089035564831065,-80.88134765625|44.97257068224067,-81.40869140625|44.8558688073573,-81.93603515625|45.026950453185506,-82.55126953125|45.406163745160214,-83.5400390625|45.78284835197681,-84.57275390625|46.15700496290808,-85.60546875|46.23305294479828,-86.517333984375|46.03510927947334,-87.308349609375|45.836454050187726,-88.099365234375|45.67548217560647,-88.681640625|47.99727386804474,-88.90960693359375|48.00872694070618,-89.422384747362|48.078505101664575,-90.037619122362|48.1481887505854,-90.652853497362|48.10785710345748,-90.740744122362|48.225097592060386,-90.872580059862|48.078505101664575,-91.268087872362|48.08217501817276,-91.575705059862|48.19215079157971,-91.861349591112|48.34937203373956,-92.0645966614245|48.33841880508485,-92.300802716112|48.23607514890092,-92.333761700487|48.331115344958384,-92.4820771301745|48.4838455701099,-92.8289794921875|48.596807287341846,-93.0212861982888|48.527734567191324,-93.5541231123513|48.54228403147538,-93.8177949873513|48.658529250749524,-94.1913301436013|48.72742329875959,-94.5923311201638|48.78536623015411,-94.9933320967263|48.87215533860201,-95.2405244795388|48.886605576629925,-95.6360322920388|48.78898544442703,-96.0205537764138|48.73104669003351,-96.44567453376897|48.76002442116329,-96.97301828376897|48.556829314722485,-97.20373117439397|48.05994259338911,-97.20373117439397|47.73584772768336,-97.09386789314397|47.40972298357073,-96.98400461189397|47.08156627951654,-96.87414133064397|46.901714603324805,-96.89611398689397|46.85665710610569,-97.45641672126897|46.87168047601221,-98.25841867439397|46.856657106105665,-99.59875070564397|46.84162953184038,-100.93908273689397|46.84914384452681,-101.35656320564397|46.84162953184038,-101.70812570564397|46.85942776594315,-102.17122371104136|46.836908509818876,-102.52382337134662|46.836908509818876,-103.17201673072162|46.927018815938936,-103.50160657447162|46.69689933783226,-103.1873880996809|46.55354342736759,-103.1873880996809|46.466590932064314,-103.2972513809309|46.334004985632575,-103.3521830215559|46.201096815989914,-103.4071146621809|46.06786635694667,-103.4620463028059|45.89227322605981,-103.3906351699934|45.71612317089835,-103.3192240371809|45.62399767612874,-103.5114847793684|45.45470708776329,-103.5444437637434|45.28490676739647,-103.5774027481184|45.106843195509484,-103.5609232559309|44.908773558866855,-103.6488138809309|44.70611502538482,-103.8685404434309|44.408641060860944,-103.8575541153059|44.36153247411174,-103.7147318496809|44.2947304163488,-103.4565531387434|44.14907472653383,-103.2807718887434|44.08203102595271,-102.9072367324934|44.089922468098244,-102.6106058731184|44.018861590211884,-102.2920023574934|43.939805054682495,-102.2755228653059|43.85829677916183,-102.3431396484375|44.39294241085277,-104.60455664806784|44.17271904794254,-105.94488867931784|44.014911263473984,-106.60406836681784|43.05922556775775,-106.47223242931784|42.898472569367925,-105.83502539806784|42.70501434121029,-105.19781836681784|41.990496203270155,-105.06598242931784|41.26786671462826,-104.93414649181784|40.537150041291156,-104.80231055431784|39.84900208721642,-105.00006446056784|39.66893673818376,-105.3988234468572|39.580290274408675,-106.34765625|39.6479973237342,-106.9189453125|39.54641191968676,-107.666015625|39.257778150283386,-108.2373046875|39.2067188449185,-108.80859375|38.950865400920016,-109.423828125|38.96795115401596,-110.006103515625|38.91670933461174,-110.58841463386983|38.83117764105863,-111.08279939949483|38.745543050043906,-111.57718416511983|38.91670933461174,-112.02762361824483|38.48802257459572,-112.25833650886983|38.246836818905756,-112.28030916511983|38.0913647261547,-112.39017244636983|37.86620899033695,-112.50003572761983|37.64036318932431,-112.60989900886983|37.837234243696585,-112.91134807934924|38.536678009385675,-112.71359417309924|39.08456354876798,-112.38400432934924|39.62822655463809,-112.24118206372424|39.94549031786236,-111.84303557030785|40.64933613443504,-111.88698088280785|41.16413074975152,-111.95289885155785|41.740527438925064,-112.18361174218285|42.39298713963626,-112.27150236718285|43.04676320574944,-112.48024260155785|43.89190598131474,-111.65626799218285|44.40430574956993,-111.35963713280785|44.57672567556643,-110.73341642968285|45.06021210175154,-111.05509703772327|45.392932919133095,-111.36271422522327|45.5914397852913,-111.2272268844116|45.83308632726237,-111.3590628219116|45.89429051706444,-111.6502005172241|45.875171445875104,-112.1226126265991|45.97451876492385,-112.4796682906616|46.23730877687327,-112.29848821416527|46.225909172465585,-112.15017278447777|46.445881955651835,-112.00735051885277|46.706421459451924,-112.01284368291527|46.965709503439555,-112.02383001104027|47.2871292803084,-112.16665227666527|47.487958699120846,-112.38637883916527|47.7840778067928,-112.15566594854027|47.96094405046076,-112.29848821416527|48.11520697297621,-112.45778997197777|48.331129770891934,-112.59511907354027|48.444215824815956,-112.85879094854027|48.535231252839395,-113.13344915166527|48.62971404201499,-113.33120305791527|48.75981008089207,-113.7908935546875|48.63288072674892,-113.91710986447083|48.436461988506586,-114.02697314572083|48.36352088141846,-114.24669970822083|48.12940624138611,-114.37853564572083|48.033990970339815,-114.73009814572083|47.96783055551521,-115.12560595822083|48.158729184570966,-115.43322314572083|48.40000450860535,-115.82873095822083|48.61835731972006,-116.18029345822083|48.3416461723746,-116.16943359375|48.3416461723746,-116.16943359375|48.026672195436014,-116.54296875|47.628380027447164,-117.09228515625|47.54687159892241,-117.652587890625|47.32393057095946,-117.97119140625|47.10004469402522,-118.289794921875|47.077604117159666,-118.883056640625|47.05515408550351,-119.476318359375|47.18971246448423,-119.794921875|47.040182144806685,-120.146484375|47.11499982620777,-120.76171875|47.353710619513684,-121.35498046875|47.59134647679717,-121.9482421875|47.554286701279636,-122.244873046875|47.66538735632665,-122.508544921875|47.680182946484265,-123.123779296875|47.46523622438362,-123.486328125|47.16730970131579,-123.11279296875|46.89773908550703,-122.926025390625|46.5135155805974,-122.838134765625|46.12655630241854,-122.816162109375|45.96600815877737,-122.92422826901486|45.92017061779385,-122.82535131588986|45.76710508706392,-122.69351537838986|45.61361838795423,-122.56167944088986|45.44429650490584,-122.46280248776486|45.35944441557727,-122.63858373776486|45.19710017865486,-122.84732397213986|44.92549423676863,-122.99014623776486|44.43422116708742,-123.1134398409618|44.0485599542741,-123.0255492159618|43.66831867550607,-123.2452757784618|43.33361894347486,-123.3771117159618|42.932748526101506,-123.3111937472118|42.71518628771983,-123.3002074190868|42.44823748537619,-123.2342894503368|42.34666976991593,-122.79149920004869|42.27354905657568,-122.72558123129869|42.10260380698523,-122.64867693442369|42.00032514831621,-122.5634765625|41.82864200186054,-122.552490234375|41.65649719441145,-122.62939453125|41.599013054830216,-122.76123046875|41.541477666790286,-122.89306640625|41.31082388091817,-122.8271484375|41.29431726315256,-123.22265625|41.269549502842565,-123.57421875|41.06437663155705,-123.65915044985468|40.94000852397858,-123.63717779360468|40.74725696280421,-123.255615234375|40.57224011776902,-122.420654296875|40.43858586704331,-122.2998046875|40.304665382591786,-122.178955078125|40.111688665596006,-122.2119140625|39.85072092501602,-122.23388671875|39.58875727696553,-122.255859375|39.317300373271124,-122.1240234375|39.044786048501535,-121.9921875|38.77121637244283,-121.8603515625|38.496593518947684,-121.728515625|38.52238409020095,-121.5087890625|38.45358870894151,-121.17919921875|38.33303882235469,-120.838623046875|38.30718056188316,-120.728759765625|38.11727165830543,-120.640869140625|37.92686760148135,-120.552978515625|37.82280243352756,-120.377197265625|37.71859032558816,-120.179443359375|37.71859032558818,-119.959716796875|37.52693597031617,-120.03652961462802|37.42230798274,-119.72748335243881|37.34395908944491,-119.2236328125|37.34395908944491,-119.2236328125|37.317751851636885,-118.85009765625|37.36142550190517,-118.509521484375|37.28279464911045,-118.27880859375|37.1165261849112,-118.23486328125|36.85325222344019,-118.19091796875|36.55377524336091,-118.10302734375|36.25313319699074,-118.01513671875|36.3770678398369,-117.740478515625|36.50963615733049,-117.081298828125|36.50963615733049,-117.081298828125|36.34167804918316,-116.78466796875|36.27970720524019,-116.466064453125|36.182224980422546,-116.30126953125|35.98689628443794,-116.19140625|35.79108281624999,-116.246337890625|35.594785665487315,-116.30126953125|35.36217605914688,-116.070556640625|35.20972164522146,-116.092529296875|35.083955579276505,-116.279296875|34.939985151560485,-116.531982421875|34.867904962568794,-116.87255859375|34.79576153473041,-116.96044921875|34.48844783780938,-116.905517578125|34.397844946449915,-116.817626953125|34.361576287484226,-116.553955078125|34.189085831172456,-116.466064453125|34.07996230865881,-116.400146484375|33.87953701355925,-115.90576171875|33.87953701355925,-115.90576171875|33.87953701355925,-115.90576171875|33.68372144278084,-115.48663933501376|33.579465985325605,-114.76034561835371|33.616069915721255,-113.26620499335371|33.54284652362709,-111.99179093085371|32.69633189404618,-111.35458389960371|31.486378845391897,-110.98104874335371|30.847142936287803,-110.89315811835371|30.677130361043766,-110.84218422836159|30.31740791729202,-111.06191079086159|29.134407172367098,-110.88612954086159|28.614903668660965,-109.90834633773659|28.30582915679121,-108.89760415023659|28.459033019728043,-108.1494140625|28.526622418648124,-107.171630859375|28.372068829631637,-106.402587890625|28.188243641850313,-106.248779296875|27.868216579514105,-105.985107421875|26.93186515638894,-105.64453125|26.244156283890806,-105.457763671875|26.106120832355543,-104.996337890625|25.671235828577093,-104.666748046875|25.185058883580723,-104.43603515625|24.657002173279132,-104.600830078125|24.076559120295475,-104.490966796875|23.714953506990344,-104.007568359375|23.5035518974242,-103.150634765625|23.301901124188955,-102.952880859375|22.907803451058456,-102.623291015625|22.725523811089488,-102.23876953125|22.471954507739287,-101.53564453125|22.20774917841092,-101.0302734375|21.963424936844312,-100.7666015625|21.483740907163348,-100.61279296875|21.002471054356818,-100.458984375|20.519644202729065,-100.30517578125|20.313720903878068,-99.99755859375|20.055931265194562,-99.6240234375|19.704657579362436,-99.722900390625|19.352610894378767,-99.678955078125|19.290405639498143,-99.42626953125|19.300774825859104,-99.063720703125|19.290405639498143,-98.701171875|19.197053439465,-98.45947265625|19.041348796589165,-98.15185546875|19.04452203291036,-97.89178013809402|18.951030800630146,-97.70501255996902|18.784694895051533,-97.33147740371902|18.826294333168754,-96.67229771621902|18.420263640132095,-96.23284459121902|18.274273783315895,-95.93621373184402|18.649425856403752,-95.56267857559402|18.482792877858987,-95.13421177871902|18.117719676602686,-94.71673130996902|18.044613088936522,-93.96966099746902|17.940122395502065,-93.16765904434402|17.929669925697073,-92.79412388809402|17.678626261868303,-92.08001255996902|17.78327070310832,-91.71746373184402|18.28470571732435,-91.33294224746902|18.57654396020167,-90.86053013809402|18.56612971375347,-90.01458287246902|18.472372919918865,-89.11370396621902|18.701465211647896,-88.28972935684402|19.14432818506539,-88.06023226904404|19.889886878480596,-87.79656039404404|20.240748542228562,-87.47795687841904|20.734734311201954,-87.19231234716904|20.74500870135227,-88.13713656591904|20.755282393701695,-89.08196078466904|20.940089210052996,-89.58733187841904|22.17640838257815,-89.2010517419061|23.512811005111047,-87.9925556481561|24.875663220517428,-85.8392353356561|24.915524974708603,-85.0482197106561|24.895595706418156,-83.9056415856561|24.955373850895064,-82.5543232262811|25.29437116258816,-80.9033203125|26.814266197561462,-80.39794921875|28.13981591275445,-80.70556640625|29.81205076752506,-81.58447265625|31.38177878211098,-81.54052734375|32.778037985363675,-80.70556640625|34.17090836352573,-79.73876953125|35.03899204678081,-78.9697265625|35.897950193357595,-77.98095703125|38.88248119755085,-77.14599609375|38.824961714032675,-76.99821031969634&markers=icon:http://192.168.1.194/public/images/g-pin-icon.png|size:mid|44.30293238565196,-68.2665974476563&markers=icon:http://192.168.1.194/public/images/r-pin-icon.png|size:mid|38.824961714032675,-76.99821031969634&markers=color:red|size:mid&maptype=roadmap&sensor=false&key=AIzaSyCROTlQkfNOnb5oZxUTCXPvz9Dz_xwRXzo" />
You should check the response header to figure out what is wrong with your static maps request.
The Google Static Maps API may issue an error or warning when something goes wrong. You should check for warnings in particular if you notice that something is missing from the map. It's also a good idea to check for warnings before launching a new application. Note that the warnings may not be immediately apparent because they appear in the HTTP header.
source: https://developers.google.com/maps/documentation/static-maps/intro#Moreinfo
The X-Staticmap-API-Warning header will contain explanation about error or warning. As I can see in the documentation there are certain limits for the number of geocoded locations or the number of polyline vertices (15). This is documented in
https://developers.google.com/maps/documentation/static-maps/error-messages#warnings
I hope this information might help to troubleshoot your issue.
UPDATE
Static Maps URL from your example is too long. It contains 16187 symbols. The Static Maps API restricts a maximum length of the URL to 8192 characters. The sample URL gets an error
If you need so long path you should implement encoded polyline calculation as described in
https://developers.google.com/maps/documentation/utilities/polylinealgorithm
and apply it in your URL.
I created a simple JavaScript code that converts your coordinates to encoded polyline. You can see it on https://jsfiddle.net/xomena/tqv2zsq0/. The encoded polyline has 3064 characters that is within allowed limit.
Now you can use it in the URL as shown in this code snippet (run it to see result)
<img src="https://maps.googleapis.com/maps/api/staticmap?size=250x200&path=color:0xff0000ff|weight:2|enc:i|kmGfit_LjpFhc_A`kJpg{AlkJpg{AvkJpg{A~|\|j_AzxTz{D`cQhoFfrO~zKnoLhnc#t~X~zKj{g#rst#~HzmoAjnIhxv#`dYph~#tc]fwsAqa`#rkiB_jIpm{Btl]btjDuwRzv_CgoAzv_CfeApqnBlwBrst#~vMpytAysDfl}AysDfl}AviDnwnCw_Y|xeAv|GtxJ~uH_fBdfN~sHvfN~sHiwE|re#ewEhyYi`A|kb#zvSra{#hyDren#owE|yh#xbKh|i#l{#hcm#n{#fcm#dwf#hcm#np`#|nr#reKria#xxLhdPdqUrlq#t`Lhg`#mrl#fniBwsaDgl}A{oaBe`dCsw\oy{DaxdAke|FshSetjDztw#ox~#_hPom{BsnYo}nDq_c#}e{#wmu#ixv#cdr#sen#osqA}`l#_pb#{~eBo|N}xeAykAqg{AokS}trAe`iAff}#ijDra{#{qWckX{wNutWeaIirV{kBs{ZebF}d_#_bF_e_#{aF}d_#umMiyYe|UuxJeoDswg#wqDg`]pgA_ho#m~mAnp`A?fl}AryWfppAn{WfppAj}WfppAh_XfppAdaXfppAbcXfppA~dXfppA|fXfppAxhXfppAtjXfppAxbGtpoBdmXfppA|_f#||x#jpL~re#nrUz~eB|sUz~eBjuU|~eB|vUz~eBjxU|~eBgl`#ddwBaaiAxb`EiqhAluhEmahAnuhEizMbbqDbte#znyCrxe#znyC`m^dvpBendMxok#sfAxccBcsLfdwBorLddwB`{FhdPw{U~vXds[|flA}Ura{#inTfxv#su]huf#lcAfcm#r~R~lE_qQ~}[qy\bwbA_aU|pd#vnLdagB}yA|nr#quUr}gAqmLfimAeiJfimAm}O|go#iyA|flAbaRfbjAbiJ~_rAatD|~eB|tf#|`l#p``B?ph~#smThu~#umT|a_AsmTbcb#hhCpxG|llB{|Ans{Cz|A`xdG||A`xdG}m#fppA|m#htcAgnBhmyAvkCvzcA?fr}BerP|j_Af}k#{j|#~~Z?l~OrmTt{XhvIr}XhvIt_YjvInha#i}L|ka#k}Lv~Prpd#`a`#~lEfd`#~lE|wa#_fB|te#hdPpqf#h|i#fby#ucAleHs{Zn`Lslq#jm[sia#~aLq}gAip#}|x#b{Lif}#`mN_fBl|NreLolgBztxLj_j#`xdGhy]zv_C~syD_wXvk^om{Bbxd#qm{BtpjC_wXlclC}vX~umC_wX|keC|re#jdb#f{lA`iPfixDefLpqnB|yRd|pC|jw#nqnBb~HpqnB`~p#fdwBwiBdvpBf_IlvpBpuO|p_BfvOzp_Byl`#f~vAhvrA~`l#jbn#hhCvj]rmTd~j#tmTpbk#rmTmme#`{y#qrgC_se#g_jB}j_A}diBs{Z{}|#kwlAanhCrqGmpcB~zKoqoB|`l#{l~BhdPau~Brwg#eadDy|_DoacB}|x#st`#{hyBwl}Any}#o~_Apa{#uwe#wmYien#|vXo}Jrzw#nvBpg{A}kRrvdAmir#kkb#ffA_~[y}i#s{Zk{q#ha#qsq#tcA{w}#r{Zeff#h|i#wyx#}`l#kpa#r{Zec]rb^odi#hyYyaU|nr#ywPrst#omQ|re#clX`xxAhxWzsWrje#rmTzfMh|i#dvl#~vXjsQftcAn|K|flAchd#pa{#}bn#|flAwsi#ftcAl`u#{bA??ro|#r}gAhxlAfhjBl|NzllBjpj#ff}#hvj#ff}#fkC|zrBhkCzzrB_hYff}#pe\ftcAsrMfdwB}rm#zzrBglm#zzrBrfF||x#kuT|nr#m{AfdwBj~h#|xeA`ey#s}gAxss#gnc#j`jAkdPnqjAihClj^lbTn}G_iRr{\}vXh~\_wXfa`#_iRjqOria#ru^rwg#p`t#t{Zl}~ApaWjijAidPngiAh|i#zj`A|vXlhmA_{Kvni#scAlcs#_{KxyRmnuA~gM_{Klk`#s_Nd~RosO`p`#ucAzr`#r_NhfJ~vXpfJ~vXr`l#_{KbfB|flAxyCftcAhag#xqOhhWihCtsd#woiAzda#qabDhbYirV~cYgrVbud#|lE`~q#jhCfdr#hhCr_t#_wXdft#}vXxlt#_wXlst#}vXe`Di|i#|lL}j_AlpVsoaAr`DsmT|ad#idP~dd#idPliSsia#hjS_se#?g|i#xld#`_N|lSqj{#thNalaB??xbDq}gA_pGsoaAnjN}`l#bn_#uqGnlr#sqGtny#idP`vy#idPseWsst#q{X{v_C??vx_#}|x#hbKif}#h`R}d_#vce#smTzfe#hvIxie#hvIxll#}`l#zw\hhC~pWhnc#xb[fjp#paMroaAzaMhdPt_{#ivIhuPidPraF}nr#`u`#kdP`iT}zKrcf#}p_B????zfe#ozpApjSizlCwcFmybHrhMa|wFvidDqm{BdikFq}gAfz{BidPpe`#s}HfgeAh|i#v`fFsia#|mdBc~}Dtj{#eldEo|\ecqCmeLc~}D|d]oeuC|{b#i`]bo}#}nr#d{uDsoaAdieCinc#v}Y{byA~|sA}j_Ar}}A}`l#jcfB|d_#vjpBsmT`seAgl}Afhh#{jfDhkf#}re#b~kA}j_Afrb#gbjAxop#qihCfrr#quaB`vn#}nr#~t|Ai`]|~|Ai`]th}Ag`]~eg#sa{#djq#s}gAlrcA~hRhwcAsqGvcKijp#w_A}xeAv_A}xeAnfQsen#bl]qa{#yRoxq#hgQinc#rn_#q}gA_cG{v_CthnAsytAlo[}|x#wghAq}gAnp_#}trAthfAgppA|gMe|pC`lSos{Ch`As}gA~_p#enjC_mS}xeA_}`BgbjA}~w#qg{A``AefdD~hQo}nD{vk#y|_D{nuAkyk#wrpC}nr#{ocAgf}#kn_Bixv#g_AdpwDe_AbpwDabc#puaB_npFgmjAo_dGa`kFydiGgqcLcxF{nyCn{Bcd~EqtJw|fGweaAwmaIkzgHquaBu{aGra{#mreIbtjDyqqHsqGsuoGoabDm`oGoy{DophDoeuCowfDyb`Ei|eQoabDnfJuz[&markers=icon:http://192.168.1.194/public/images/g-pin-icon.png|size:mid|44.30293238565196,-68.2665974476563&markers=icon:http://192.168.1.194/public/images/r-pin-icon.png|size:mid|38.824961714032675,-76.99821031969634&markers=color:red|size:mid&maptype=roadmap&sensor=false&key=AIzaSyCROTlQkfNOnb5oZxUTCXPvz9Dz_xwRXzo" />
There is still a warning message and you can check it in browser network console as I explained in the first part of my answer.
So the warning says
x-staticmap-api-warning: Failed to fetch image url http://192.168.1.194/public/images/g-pin-icon.png
Google cannot fetch your custom icon, because it is not available publicly, the 192.168.1.194 is your internal IP address. You have to publish your icons on publicly available hosts in order to avoid this warning messsage.

Google Earth Plugin not exact coordinates

I've got quite strange google earth plugin behaviour. I get the camera position from the plugin to create some KML with coordinates, then I store it in database. When I reload the page, then it reads the kml, inserts it inside some other string - as a result I've got a string with whole kml document inside my javascript code. Then I load it into the plugin. Usually everything works, however after loading I see two things:
The coordinates returned by the API are not the same I have in the kml I'm loading
The camera position is sometimes moved a little bit, which causes errors like: I've got a camera inside a building, and after a couple of page refreshing, the camera suddenly is outside the building.
Do you have any hints how this could be fixed?
Example:
I've created a document, and inserted this camera tag inside:
<Camera>
<gx:ViewerOptions><gx:option name='streetview'></gx:option></gx:ViewerOptions>
<longitude>2.1201209999999993</longitude>
<latitude>48.80452499999986</latitude>
<altitude>2.4999999991174264</altitude>
<heading>22.795249807940547</heading>
<tilt>82.25987544961218</tilt>
<altitudeMode>relativeToGround</altitudeMode>
</Camera>
Then I loaded it into the plugin, and asked to fly there. When it stopeed flying, I got the coordinates using copyAsCamera() and the latitude was changed to 48.8044078508718.
The difference is not huge, just 0.000117149 but as a result it is showing a totally different place (a different room in the palace.
I'm trying to get exactly the same place, as written in the coordinates.
I have rewritten the answer to cover the various points you have made and the example you have provided.
street view
The KML data is setting <gx:ViewerOptions> to enter street view mode based on the camera. The key words being based on - a street view is an approximation. Things like the camera tilt and heading are no longer applicable as they are replaced by a SteeetView POV object. Further to that you can't guarantee that a camera at any given latitude and longitude will actually enter street view at the same given latitude and longitude.
relativeToGround and terrain data
Using altitude mode relativeToGround can cause the issue you are seeing. This is because the terrain data hasn't always finished streaming when the relatively positioned element (in your case a camera) is added.
To be clear you should use <altitudeMode>absolute</altitudeMode> and ge.ALTITUDE_ABSOLUTE.
The example you provided uses both <altitudeMode>relativeToGround</altitudeMode> and ge.ALTITUDE_RELATIVE_TO_GROUND.
You could also try disabling the terrain data by turning off the terrain layer, i.e.
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, false);
multiple viewchangeend events
The viewchangeend event may fire in the middle of a viewchange, especially if the plugin pauses for a brief period during the change. Your markup is triggering street view mode which causes this to happen.
You can resolve this by using setTimeout to throttle the viewchangeend event like so.
var timer = null;
google.earth.addEventListener(ge.getView(), 'viewchangeend', function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(eventHandler, 100);
}
);
see: https://developers.google.com/earth/documentation/events#event_listeners
Tilt discrepancy
The plugin automatically "swoops" at ground level so that it moves from looking straight down (0 degrees tilt) to straight along the horizon (90 degrees tilt). This is what is causing the discrepancy in the tilt value in the view. You are viewing objects at ground level and so the view is being automatically set - this can't be disabled.
Storing and outputting KML data
Take a look through this document, it gives some really good information of storing coordinate data and covers points like the one I mentioned - A Database Driven Earth App.
.

Issues with KML Layers limit

I have loaded 6 kml layers via url to my website to be toggled off/on by checkboxes. I have recently notice though, that it will only allow me to show 4 kml's at a given time. When I select more than 4 the 5th and 6th does not show. It does not matter what ones I choose, it seems to limit me to only showing 4. Can someone direct me on what may be causing this or should I be coding this some other way? The kml's by themselves do work and are under 800kb. Is just seems very weird that I can only have 4 kml showing at a given time.
This is the site - www.gbnrtc.org/bikemap
If you check the KML Support page, which lists the level of KML support provided for Google Maps and Google Maps for mobile, it lists the following size and complexity restrictions:
Maximum fetched file size (raw KML, raw GeoRSS, or compressed KMZ): 3MB
Maximum uncompressed KML file size: 10MB
Maximum number of Network Links: 10
Maximum number of total document-wide features: 1,000
Given that you estimate your file size at ~800K, that would put you right around 3.2 MB for four of your files. Without knowing more about your KML content, it seems to make sense that the limit would gate you after loading four.
This answer is quite old. I have found a great library to load large KML/KMZ files (even if Google is throwing an error). Please note that the library is quite old and have not received any update.
Here are more details about it:
Using GeoXML, I was able to add all the required KMLs to the map successfully! https://github.com/geocodezip/geoxml3
Step 1: Download and include geoxml3.js script
<script src="geoxml3.js"></script> // include after google map api script
Stpe 2: Instantiate and initialize the object in JS:
var myParser = new geoXML3.parser({map: map});
myParser.parse('/path/to/data.kml');
And this will load the KMl file.

Parse KML loaded from network link on each Google Earth plugin movement

Is there a way to parse a network links KML each time the Earth is moved. I know how to setup the eventListener.
Page flow:
- I load the KML using fetchKml
- Each time the earth is moved it pulls the network stream
- I want to parse the streamed KML to see if it's within view limits or not so I can display a message.
So to summarize. I want to somehow parse the returned KML from a network link to see if the features are within view and if no show a message like "Out of Range".
Thanks in advance.
if you are generating the network link servier side you can use viewformat in kml to pass as parameters the current google earth view bounding box as parameters,
http://code.google.com/apis/kml/documentation/kmlreference.html#viewformat
if the view BBOX isn't in the desired area generate you could try return kml string consisting of a networklinkcontrol with a message
http://code.google.com/apis/kml/documentation/kmlreference.html#networklinkcontrol
the other option is define you data client side in an object, either on the page load and loop through on the data to see if things on the google earth plugin viewchangeend event.

Need guidance on a Google Map application that has to show 250 000 polylines

I am looking for advice for an application I am developing that uses Google Map.
Summary:
A user has a list of criteria for searching a street segment that fulfills the criteria. The street segments will be colored with 3 colors for showing those below average, average and over average. Then the user clicks on the street segment to see an information window showing the properties of that specific segment hiding those not selected until he/she closes the window and other polyline becomes visible again. This looks quite like the Monopoly City Streets game Hasbro made some month ago the difference being I do not use Flash, I can’t use Open Street Map because it doesn’t list street segment (if it does the IDs won’t be the same anyway) and I do not have to show Google sketch building over.
Information:
I have a database of street segments with IDs, polyline points and centroid.
The database has 6,000,000 street segment records in it. To narrow the generated data a bit we focus on city. The largest city we must show has 250,000 street segments. This means 250,000 line segment polyline to show.
Our longest polyline uses 9600 characters which is stored in two 8000 varchar columns in SQL Server 2008.
We need to use the API v3 because it is faster than the API v2 and the application will be ported to iPhone. For now it's an ASP.NET 3.5 with SQl Server 2008 application.
Performance is a priority.
Problems:
Most of the demo projects that do this are made with API v2. So besides tutorial on the Google API v3 reference page I have nothing to compare performance or technology use to achieve my goal.
There is no available .NET wrapper for the API v3 yet.
Generating a 250,000 line segment polyline creates a heavy file which takes time to transfer and parse. (I have found a demo of one polyline of 390,000 points. I think the encoder would be far less efficient with more polylines with less points since there will be less rounding.)
Since streets segments are shown based on criteria, polylines must be dynamically created and cache can't be used.
Some thoughts:
KML/KMZ:
Pros:
Since it is a standard we can easily load Bing maps, Yahoo! maps, Google maps, Google Earth, with the same KML file. The data generation would be the same.
Cons:
LineString in KML cannot be encoded polyline like the Google map API can handle. So it would probably be bigger and slower to display. Zipping the file at the size it will take more processing time and require the client side to uncompress the data and I am not quite sure with 250,000 data how an iPhone would handle this and how a server would handle 40 users browsing at the same time.
JavaScript file:
Pros:
JavaScript file can have encoded polyline and would significantly reduce the file to transfer.
Cons:
Have to create my own stripped version of API v3 to add overlays, create polyline, etc. It is more complex than just create a KML file and point to the source.
GeoRSS:
This option isn't adapted for my needs I think, but I could be wrong.
MapServer:
I saw some post suggesting using MapServer to generate overlays. Not quite sure for the connection with our database and the performance it would give. Plus it requires a plugin for generating KML. It seems to me that it wouldn't allow me to do better than creating my own KML or JavaScript file. Maintenance would be simpler without.
Monopoly City Streets:
The game is now over, but for those who know what I am talking about Monopoly City Streets was showing at max zoom level only the streets that the centroid was inside the Bounds of the window. Moving the map was sending request to the server for the new streets to show. While I think this was ingenious, I have no idea how to implement something similar. The only thing I thought about was to compare if the long was inside the bound of map area X and same with Y. While this could improve performance significantly at high zoom level, this would give nothing when showing a whole city.
Clustering:
While cluster is awesome for marker, it seems we cannot cluster polylines. I would have liked something like MarkerClusterer for polylines and be able to cluster by my 3 polyline colors. This will probably stay as a “would have been freaking awesome but forget it”.
Arrow:
I will have in a future version to show a direction for the polyline and will have to show an arrow at the centroid. Loading an image or marker will only double my data so creating a custom overlay will probably be my only option. I have found that demo for something similar I would like to achieve. Unfortunately, the demo is very slow, but I only wish to show 1 arrow per polyline and not multiple like the demo. This functionality will depend on the format of data since I don't think KML support custom overlays.
Criteria:
While the application is done with ASP.NET 3.5, the port to the iPhone won't use the web to show the application and be limited in screen size for selecting the criteria. This is why I was more orienting on a service or page generating the file based on criteria passed in parameters. The service would than generate the file I need to display the polylines on the map. I could also create an aspx page that does this. The aspx page is more documented than the service way. There should be a reason.
Questions:
Should I create a web service to returns the street segments file or create an aspx page that return the file?
Should I create a JavaScript file with encoded polyline or a KML with longitude/latitude based on the fact that maximum longitude/latitude polyline have 9600 characters and I have to render maximum 250,000 line segment polyline. Or should I go with a MapServer that generate the overlay?
Will I be able to display simple arrow on the polyline on the next version.
In case of KML generation is it faster to create the file with XDocument, XmlDocument, XmlWriter and this manually or just serialize the street segment in the stream?
This is more a brainstorming Stack Overflow question than an actual code problem. Any answer helping narrow the possibilities is as good as someone having all the knowledge to point me out a better choice.
Large numbers of short GPolylines run massively slower than small numbers of long GPolylines.
The speed difference between Google Maps v2 and Google Maps v3 is not going to be significant, because most of the CPU time will be taken up by the actual graphics system of the browser. Google Maps uses the VML, SVG or Canvas graphics systems, depending on the browser. Of these, VML is by far the slowest, and that gets used whenever the browser is MSIE.
Before embarking on tackling 250,000 line segments, I suggest you take a look at this quick speed test of 200 random polylines. Try zooming and paning that map in MSIE.
Then, also consider the amount of data that needs to be sent from the server to the client to specify 250,000 line segments. The amount of data will vary depending on whether you choose KML or JSON or GeoRSS, but if you end up with 20 bytes per line segment that would take 50 seconds to fetch on a 1 megabit broadband connection. Consider whether your users would be prepared to sit around for 50 seconds.
The only solution that really makes sense is to do what Google do for their traffic overlay, and draw the lines onto tiles in the server, and have those tiles be displayed as a GTileLayerOverlay in the client.
What you need is a spatially aware database, and a server-side graphics library like gd or ImageMagik. The client asks for a tile from the server. If the zoom is above a certain level the server scans the database for line segments that have bounding boxes that overlap the bounding box of the requested tile and use the graphics library to draw them.
The zoom level limit is there to limit the amount of work that your database and server needs to do. You don't want to end up drawing 250,000 line segments onto a single zoomed out tile because that's an awful lot of hard work for the server, and isn't going to mean very much to the user.
Regarding click handling:
The easy thing to do is to listen for clicks on the map, rather than on the objects, and send the click details to a server. The server then uses the click location to search the spatially aware database and returns the details of the clicked object if there is one. The client code does this:
GEvent.addListener(map,"click",function(overlay,point) {
var url="clickserver.php?lat=" + point.lat() + "&lng=" +point.lng();
GDownloadUrl(url, function(html) {
if (html.length) {
map.openInfoWindow(html)
}
});
});
The harder thing to do is to handle the changing of the cursor when the pointer is over the polylines. There's a known technique for doing cursor changes for small markers, which works like this:
Whenever a tile is fetched, the .getTileUrl() also makes a call to a server that returns a list of hotspot boxes for that tile. As the mouse moves, the client constantly calculates which tile the mouse is over, and then scans the corresponding list of hotspot boxes.
Google themselves, in their GLayer() code, add the sophistication of performing a quadtree search to speed up the search for hotspots within a tile, but other people who have implemented this strategy in their own code reckon that's not necessary, and a linear scan of the hotspot list is fast enough.
I've no idea how to extend that to handling cursor over polyline detection.

Resources