From 23c2c81a2f744503cc3cc502e5d26e1df7a84f13 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Mon, 30 Sep 2019 18:44:35 +0100 Subject: [PATCH 01/22] Working reprojection example. --- examples/reprojection.html | 287 +++++++++++++++++++++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 examples/reprojection.html diff --git a/examples/reprojection.html b/examples/reprojection.html new file mode 100644 index 0000000..e65eefb --- /dev/null +++ b/examples/reprojection.html @@ -0,0 +1,287 @@ + + + + + + + + Reprojection + + + + +

Examples for + + Use Case: Display an interactive map + +

+ +

+The embedded map viewers here show their default view, +which is generally a map of the whole globe +although it may be personalized to the viewer's location. +

+

+The JS API maps are the simplest viewers supported by each framework. +Some require an explicit position and zoom level to display anything; +the examples use a full-globe map (zoom 0) centered on 0° latitude and longitude. +Some frameworks also require explicit map tile source; +the examples in those cases use OpenStreetMap tiles. +

+ +
+ Jump to section… + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

OpenLayers (with OpenStreetMap tiles)

+
+
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 2a0d6b0f95f42922fcedddbaed330d049dbc14aa Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Mon, 30 Sep 2019 19:31:16 +0100 Subject: [PATCH 02/22] Example to be added; this is a placeholder file. --- examples/show-and-hide-features-overlays.html | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 examples/show-and-hide-features-overlays.html diff --git a/examples/show-and-hide-features-overlays.html b/examples/show-and-hide-features-overlays.html new file mode 100644 index 0000000..b4e4411 --- /dev/null +++ b/examples/show-and-hide-features-overlays.html @@ -0,0 +1,10 @@ + + + + +Title + + + + + \ No newline at end of file From 18558d0ec94ed84d541d637575b6b66bb9fdf48f Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Mon, 30 Sep 2019 18:44:35 +0100 Subject: [PATCH 03/22] Working reprojection example. --- examples/reprojection.html | 287 +++++++++++++++++++++++++++++++++++++ 1 file changed, 287 insertions(+) create mode 100644 examples/reprojection.html diff --git a/examples/reprojection.html b/examples/reprojection.html new file mode 100644 index 0000000..e65eefb --- /dev/null +++ b/examples/reprojection.html @@ -0,0 +1,287 @@ + + + + + + + + Reprojection + + + + +

Examples for + + Use Case: Display an interactive map + +

+ +

+The embedded map viewers here show their default view, +which is generally a map of the whole globe +although it may be personalized to the viewer's location. +

+

+The JS API maps are the simplest viewers supported by each framework. +Some require an explicit position and zoom level to display anything; +the examples use a full-globe map (zoom 0) centered on 0° latitude and longitude. +Some frameworks also require explicit map tile source; +the examples in those cases use OpenStreetMap tiles. +

+ +
+ Jump to section… + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

OpenLayers (with OpenStreetMap tiles)

+
+
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From d2d5c1dad99bdb43d3e455a0bb8f071e8642c51b Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Wed, 2 Oct 2019 11:21:53 +0100 Subject: [PATCH 04/22] Neither OSM nor Bing Maps support multiple markers in embeds. --- examples/multiple-location-markers.html | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/examples/multiple-location-markers.html b/examples/multiple-location-markers.html index 52f28e8..c9c80ba 100644 --- a/examples/multiple-location-markers.html +++ b/examples/multiple-location-markers.html @@ -54,18 +54,12 @@

Google Maps embed

OpenStreetMap embed

- - ***TODO*** +

Not applicable

Bing Maps embed

- - ***TODO*** +

Not applicable

From eab6175ddd7421f576e147dc3e17b8ab4745ee16 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Wed, 2 Oct 2019 19:51:37 +0100 Subject: [PATCH 05/22] Examples of displaying a GeoJSON polygon via the various APIs. --- examples/data/glooston.js | 28 ++++ examples/poly-features.html | 289 +++++++++++++++++++++++++++++------- 2 files changed, 265 insertions(+), 52 deletions(-) create mode 100644 examples/data/glooston.js diff --git a/examples/data/glooston.js b/examples/data/glooston.js new file mode 100644 index 0000000..a1d1c68 --- /dev/null +++ b/examples/data/glooston.js @@ -0,0 +1,28 @@ +m4h = m4h || {}; +m4h.geojson = m4h.geojson || {}; + +m4h.geojson.glooston = { + "type": "FeatureCollection", + "name": "Parish of Glooston", + "features": [ + { + "type": "Feature", + "properties": { + "osm_id": -6738314, + "admin_level": "10", + "name": "Glooston", + "boundary": "administrative", + "way_area": 10626800.0, + "z_order": 0, + "tags": "\"ref:gss\"=>\"E04005428\", \"designation\"=>\"civil_parish\", \"parish_type\"=>\"parish_meeting\"" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ [ + [ -0.907666836058734, 52.547120571911258 ], [ -0.907636562833659, 52.547806194294637 ], [ -0.907620033832431, 52.548056000505035 ], [ -0.907538197310048, 52.548142473655282 ], [ -0.90750585795982, 52.548198793094876 ], [ -0.907373625949997, 52.548476292285038 ], [ -0.907084548091568, 52.549128080726327 ], [ -0.90698483509503, 52.549166700471822 ], [ -0.906844518247651, 52.54929129944734 ], [ -0.906431562711541, 52.549887195574556 ], [ -0.906391318186813, 52.550081000729662 ], [ -0.906124159221316, 52.550149498739302 ], [ -0.905631702782561, 52.550261804654532 ], [ -0.905786392674487, 52.550562669474182 ], [ -0.905972523601356, 52.550849384954553 ], [ -0.906282711868963, 52.551424011979222 ], [ -0.906452942615303, 52.551695263909075 ], [ -0.906588228897092, 52.551948270641624 ], [ -0.906715340509795, 52.551939585849198 ], [ -0.907004148873639, 52.551949363068225 ], [ -0.907089758320216, 52.55194837988428 ], [ -0.907271577333721, 52.551929371657181 ], [ -0.907275260426386, 52.552021080814868 ], [ -0.907255138164022, 52.552179209019577 ], [ -0.907212019030384, 52.552310900156918 ], [ -0.906955100859126, 52.55267811479122 ], [ -0.906811999234366, 52.552913200458235 ], [ -0.906800590630258, 52.553076678201251 ], [ -0.906657399173969, 52.553496102608449 ], [ -0.906653805912832, 52.553581472653725 ], [ -0.906664585696242, 52.553800987061905 ], [ -0.906650032988639, 52.553972490463387 ], [ -0.906624700497627, 52.554040600067758 ], [ -0.906511063614186, 52.554283215778568 ], [ -0.906466417344565, 52.554416812240646 ], [ -0.906420513433547, 52.554603278576749 ], [ -0.906374429859471, 52.554736874064339 ], [ -0.906398504709086, 52.554833274480366 ], [ -0.906660812772049, 52.554903075895865 ], [ -0.906595505250893, 52.555099371300095 ], [ -0.906492288824748, 52.555334007058434 ], [ -0.906400481002711, 52.555584862755794 ], [ -0.906333646345572, 52.555723589218353 ], [ -0.905870924142722, 52.556298316264311 ], [ -0.905690362770614, 52.556560963417176 ], [ -0.905617329738015, 52.556710391413787 ], [ -0.905142749773415, 52.557228415451455 ], [ -0.90490604369605, 52.557435677968463 ], [ -0.904801659460035, 52.557481499510025 ], [ -0.904650293334661, 52.557574398579114 ], [ -0.904203740806925, 52.557618909233277 ], [ -0.904028479494993, 52.557663092157 ], [ -0.903913944296268, 52.557704271257208 ], [ -0.903571686173018, 52.557880893113342 ], [ -0.903443406750446, 52.557939111540911 ], [ -0.903055963368405, 52.558042495481253 ], [ -0.902452295497477, 52.558230202519894 ], [ -0.902579047784066, 52.558473177357229 ], [ -0.90255793737489, 52.558490981259581 ], [ -0.902346204462423, 52.558639091970846 ], [ -0.902255654281783, 52.558723687429293 ], [ -0.901107876843264, 52.559315414173696 ], [ -0.900982382198072, 52.559379911087269 ], [ -0.901256997180428, 52.559666514345516 ], [ -0.901378359575312, 52.559768310479001 ], [ -0.90147915055019, 52.559829584647169 ], [ -0.901609406266388, 52.559908880502476 ], [ -0.901909263908227, 52.560073479017312 ], [ -0.902264278108511, 52.560324962947725 ], [ -0.902321680455166, 52.560390168317774 ], [ -0.902354558794565, 52.560787897132165 ], [ -0.902216936893038, 52.560925078059043 ], [ -0.902219182681248, 52.561007812367684 ], [ -0.902129351152836, 52.561184093265268 ], [ -0.901950586411296, 52.561485374683542 ], [ -0.901924984425699, 52.561567889498036 ], [ -0.90199334621882, 52.561725764862082 ], [ -0.902181004281673, 52.562006291217173 ], [ -0.90211273232008, 52.562141393205607 ], [ -0.901955347482302, 52.562598410550024 ], [ -0.901956425460643, 52.562968815545901 ], [ -0.90208218960042, 52.563069784904222 ], [ -0.902461637976432, 52.563355599556196 ], [ -0.903260150432486, 52.563932083244154 ], [ -0.90350089892863, 52.564449475953715 ], [ -0.903589742310229, 52.564555465622618 ], [ -0.903879898147, 52.564812602812161 ], [ -0.903708409759261, 52.564885610059676 ], [ -0.903708140264676, 52.564896367287815 ], [ -0.903729879494552, 52.564969374395915 ], [ -0.903919693514086, 52.565288485564629 ], [ -0.903825729735367, 52.565507013126243 ], [ -0.90380632612523, 52.565574285759624 ], [ -0.903798780276844, 52.565637080738256 ], [ -0.903797253140861, 52.565702715045909 ], [ -0.903856901275726, 52.566385699167391 ], [ -0.903872262467085, 52.56677867777546 ], [ -0.903839024801572, 52.567163080287976 ], [ -0.903743174560757, 52.567514663670103 ], [ -0.903553091046637, 52.567506582580364 ], [ -0.902764460058709, 52.567537978697672 ], [ -0.902381059095446, 52.567588376244181 ], [ -0.902223853920725, 52.567622884606671 ], [ -0.901756101152284, 52.567738967917855 ], [ -0.901374047661948, 52.567857671795096 ], [ -0.901097007228326, 52.567957592473071 ], [ -0.900529092305706, 52.568187900578515 ], [ -0.900177940861143, 52.568309606293731 ], [ -0.899953362040113, 52.568380369084579 ], [ -0.899837389536934, 52.568412474387223 ], [ -0.899679286046928, 52.568421865729803 ], [ -0.899603019079307, 52.568407669513498 ], [ -0.899194105961975, 52.568296884267525 ], [ -0.899059179006301, 52.568264178269054 ], [ -0.898735156683319, 52.568243211472563 ], [ -0.898463236646816, 52.568259482581126 ], [ -0.898309355238646, 52.568276081289682 ], [ -0.898155383998948, 52.568296174454794 ], [ -0.897895950544894, 52.568348591363922 ], [ -0.897767491459265, 52.568408597727782 ], [ -0.897737128402662, 52.568445180275098 ], [ -0.897710987427894, 52.568484492829256 ], [ -0.897681163360461, 52.568676577830153 ], [ -0.897600045490305, 52.568790911140752 ], [ -0.897452901446767, 52.568891102693676 ], [ -0.897105522926398, 52.569094706512097 ], [ -0.896991526716843, 52.569170873425669 ], [ -0.896776559869353, 52.569329813419287 ], [ -0.89672131347938, 52.569351762490271 ], [ -0.896666336583992, 52.569371090767582 ], [ -0.896436906860427, 52.56939860897819 ], [ -0.895172617929558, 52.569509992035222 ], [ -0.894858387243173, 52.569563663279844 ], [ -0.894856949938718, 52.569563663279844 ], [ -0.894590329962391, 52.569607015183287 ], [ -0.894199832308385, 52.569820989504628 ], [ -0.894006784353827, 52.569867671694233 ], [ -0.893953424425951, 52.569878864492537 ], [ -0.892938417986424, 52.56998899055575 ], [ -0.891669547647605, 52.570806874032179 ], [ -0.891112322676866, 52.571137899570147 ], [ -0.891034528573261, 52.571180376359159 ], [ -0.890946763170003, 52.571210077328573 ], [ -0.89029243031705, 52.571408865835757 ], [ -0.890131631881193, 52.571527887361505 ], [ -0.889891602037276, 52.571505884782688 ], [ -0.889752452999766, 52.571525266707546 ], [ -0.888707263166693, 52.571780670539511 ], [ -0.888321885909805, 52.571903785792905 ], [ -0.888040174236705, 52.572012596458592 ], [ -0.887924381396582, 52.572043006616433 ], [ -0.887842904200313, 52.572055672959614 ], [ -0.887690729591183, 52.572065063522025 ], [ -0.887603862503209, 52.57205976768185 ], [ -0.887183001792599, 52.571951612290356 ], [ -0.887046188374827, 52.571935014972951 ], [ -0.886940007508244, 52.571933977640406 ], [ -0.886765375017011, 52.571951175518933 ], [ -0.886477375136923, 52.572022205415593 ], [ -0.885735546375297, 52.571892102142897 ], [ -0.884898316530497, 52.572321992897137 ], [ -0.884405231271044, 52.572273293267209 ], [ -0.883550484278205, 52.5725781018321 ], [ -0.882919777117224, 52.572719613524633 ], [ -0.882786916286703, 52.572663489343192 ], [ -0.882434776695328, 52.57258377977918 ], [ -0.881716663457203, 52.572511385898892 ], [ -0.8811873760918, 52.572431785250046 ], [ -0.88082984660872, 52.572394168706587 ], [ -0.880623413756429, 52.572385105789984 ], [ -0.880430096307287, 52.572386907454273 ], [ -0.880302984694584, 52.57239291300138 ], [ -0.88015952374371, 52.572408582015875 ], [ -0.879977345404091, 52.572435606958024 ], [ -0.879812684212512, 52.572469074186529 ], [ -0.876991255568149, 52.572360592229067 ], [ -0.875546135770586, 52.572321665321326 ], [ -0.875631296059521, 52.572047374321393 ], [ -0.875698220548187, 52.571915906211572 ], [ -0.87599277812985, 52.571356780167363 ], [ -0.876300181620076, 52.57087686842484 ], [ -0.87632371748052, 52.570824072352742 ], [ -0.876339797324105, 52.570770293454892 ], [ -0.876347522835549, 52.570699370726338 ], [ -0.876344917721225, 52.570628284088855 ], [ -0.87633557524227, 52.570587772297664 ], [ -0.876297307011167, 52.570527168335303 ], [ -0.876166691968856, 52.57038477599329 ], [ -0.87641309985129, 52.570155189207377 ], [ -0.876607944436415, 52.569862211791587 ], [ -0.877124296061727, 52.569230605665346 ], [ -0.877288328432607, 52.569105298907999 ], [ -0.877822376869016, 52.568528664809854 ], [ -0.878081091670843, 52.56833428592202 ], [ -0.878249346123558, 52.568219896819905 ], [ -0.878430805810951, 52.568103869382888 ], [ -0.878576153223921, 52.568017981581207 ], [ -0.878842234211077, 52.567881205046312 ], [ -0.878955601599933, 52.567831899867464 ], [ -0.879621702383108, 52.567572978516729 ], [ -0.879774595644465, 52.567477370520606 ], [ -0.879834782768501, 52.567431177205094 ], [ -0.879852838905712, 52.567302807582259 ], [ -0.87985292873724, 52.56712747951503 ], [ -0.879865145825104, 52.567053875371357 ], [ -0.879921649856475, 52.566917805664765 ], [ -0.879969530061119, 52.566833662829978 ], [ -0.880038341011882, 52.566739090677636 ], [ -0.880126555572783, 52.566636491674352 ], [ -0.880356883611631, 52.566395964597525 ], [ -0.880423448774184, 52.566333662136202 ], [ -0.880696985778199, 52.56613490522637 ], [ -0.880735792998473, 52.566060589568018 ], [ -0.880772444262065, 52.566011500757689 ], [ -0.880866138546199, 52.565925172026958 ], [ -0.880912761109444, 52.565892409655831 ], [ -0.88096504305898, 52.56586407018505 ], [ -0.881023074226334, 52.565842173972563 ], [ -0.881073559545302, 52.565831908412811 ], [ -0.881114882048371, 52.56582950583465 ], [ -0.88130334859498, 52.565845668630658 ], [ -0.881344581266521, 52.565846105462889 ], [ -0.881504750881679, 52.565818803439427 ], [ -0.88161784877595, 52.565778614829973 ], [ -0.881665728980593, 52.565752896284764 ], [ -0.881811705214263, 52.565636480091058 ], [ -0.881993524227769, 52.565507886797477 ], [ -0.882175522904331, 52.565428710272066 ], [ -0.882310629523063, 52.565340086998589 ], [ -0.882427500341527, 52.565210782973345 ], [ -0.882706157742661, 52.564812493601529 ], [ -0.882877556298871, 52.564567806494786 ], [ -0.882859230667075, 52.564477707127025 ], [ -0.882857883194148, 52.564411197293175 ], [ -0.882867046010046, 52.564344687358485 ], [ -0.88288609029407, 52.564287405732912 ], [ -0.882914117730934, 52.56423099772919 ], [ -0.883047248056041, 52.564044299278869 ], [ -0.883204722725347, 52.563883101264544 ], [ -0.88330129161839, 52.563797696656444 ], [ -0.883472420680015, 52.563682367407694 ], [ -0.883508353291379, 52.563662982016517 ], [ -0.883785124230417, 52.563571187977431 ], [ -0.883864086143891, 52.563537768565119 ], [ -0.883967482233093, 52.563182767647817 ], [ -0.884001438550832, 52.562951068068422 ], [ -0.884056235783164, 52.562829402090998 ], [ -0.88415828439944, 52.562350270764057 ], [ -0.884201223870021, 52.561997280762554 ], [ -0.884242276878505, 52.561832307202785 ], [ -0.884279826457381, 52.561749082966976 ], [ -0.88434324751644, 52.561633693722648 ], [ -0.884427419658562, 52.561513990030562 ], [ -0.884748028383464, 52.561143900409199 ], [ -0.884924726999851, 52.560693366554304 ], [ -0.884952305279073, 52.560534504483144 ], [ -0.884949700164749, 52.56046258220811 ], [ -0.884887177420974, 52.56019138447494 ], [ -0.884839297216331, 52.560162986709578 ], [ -0.884783960994829, 52.5601365003157 ], [ -0.884228802149243, 52.559979274567986 ], [ -0.884053001848141, 52.559931762682012 ], [ -0.883725925253193, 52.559857709570935 ], [ -0.883926519056137, 52.559451398241393 ], [ -0.88404060509722, 52.559256487613453 ], [ -0.884261141499471, 52.559055404909337 ], [ -0.884608609851369, 52.558848313882386 ], [ -0.88444565545883, 52.558817075383132 ], [ -0.884596033437391, 52.558588411075782 ], [ -0.884690626036809, 52.55840398236753 ], [ -0.88473131971918, 52.557964780053858 ], [ -0.884721977240225, 52.557517872713944 ], [ -0.884762491259539, 52.557314215152367 ], [ -0.884806688371517, 52.557201271908347 ], [ -0.884897687709799, 52.557043981026084 ], [ -0.885387898360343, 52.556420382666282 ], [ -0.885455541501237, 52.556334471985664 ], [ -0.886258186207598, 52.555277587541177 ], [ -0.886996511539615, 52.554252465594992 ], [ -0.887644107027937, 52.553375666657537 ], [ -0.887792778207459, 52.553095685931389 ], [ -0.888285324477742, 52.552105088201479 ], [ -0.889203223035055, 52.550157364532609 ], [ -0.889354499328901, 52.549863106429804 ], [ -0.88947676003907, 52.549625382460007 ], [ -0.889598751254653, 52.54938798494959 ], [ -0.890128487777698, 52.548266365401808 ], [ -0.890427357272725, 52.547646193024953 ], [ -0.890690024661801, 52.547168589316456 ], [ -0.891214910282312, 52.54611809415475 ], [ -0.892933656915418, 52.545800591657148 ], [ -0.893168835856801, 52.545771310512784 ], [ -0.893322447770385, 52.54576196894957 ], [ -0.8935716404302, 52.545761586546355 ], [ -0.894623298133319, 52.545810097099064 ], [ -0.895452443140561, 52.545854674316452 ], [ -0.895453880445016, 52.545854674316452 ], [ -0.895907978821138, 52.545858006680149 ], [ -0.896123035500156, 52.545871663905771 ], [ -0.896330546330788, 52.545888107199772 ], [ -0.89672409825676, 52.545951094245744 ], [ -0.896836208004219, 52.545539409714991 ], [ -0.897188886584764, 52.543822868679342 ], [ -0.897348337547695, 52.543170782921003 ], [ -0.897399182192776, 52.543021964404709 ], [ -0.897998807644926, 52.54257266491274 ], [ -0.899135805300036, 52.541742672531448 ], [ -0.899236236948801, 52.54167798578883 ], [ -0.89933810590202, 52.541615976026321 ], [ -0.900230132979151, 52.541265605563915 ], [ -0.901381503678807, 52.541508182635958 ], [ -0.902243077867806, 52.541429891578794 ], [ -0.902617046520585, 52.54139738408557 ], [ -0.902662321610904, 52.541414867110127 ], [ -0.903036380095212, 52.541253804482977 ], [ -0.903159628952193, 52.54127839006469 ], [ -0.903410438579519, 52.541157483504648 ], [ -0.903514014331778, 52.541201573734796 ], [ -0.903781622454917, 52.541526867571044 ], [ -0.904040876245914, 52.541889801735493 ], [ -0.904322408255957, 52.542369812115339 ], [ -0.904426792491972, 52.542736563606532 ], [ -0.904492818665354, 52.542810973411527 ], [ -0.904544920951833, 52.543027209118705 ], [ -0.904566660181709, 52.543578501550407 ], [ -0.904568816138391, 52.543788013804267 ], [ -0.904494705127451, 52.544986612271174 ], [ -0.90455758719734, 52.545242498424408 ], [ -0.904663947726979, 52.545532963456232 ], [ -0.904837232745286, 52.545800700915109 ], [ -0.904977459761137, 52.545855111347763 ], [ -0.905343702902473, 52.546008563700596 ], [ -0.905686140688779, 52.546237402827188 ], [ -0.905701591711666, 52.546323005507276 ], [ -0.90635754153213, 52.547051796036875 ], [ -0.906574394841716, 52.547283961979716 ], [ -0.907666836058734, 52.547120571911258 ] + ] ] + } + } + ] +}; + diff --git a/examples/poly-features.html b/examples/poly-features.html index 1a6378f..c146f98 100644 --- a/examples/poly-features.html +++ b/examples/poly-features.html @@ -8,6 +8,7 @@ Display routes/paths or regions — Maps for HTML reference examples +

Examples for @@ -15,7 +16,10 @@

Examples for

-***Introduction*** +These examples show the boundary of the parish of Glooston, Leicestershire, UK. +The boundary is defined as a GeoJSON object in the file +/examples/data/glooston.js. +This was exported from OpenStreetMap data.

@@ -42,97 +46,278 @@

Examples for

Google Maps embed

- -***TODO*** +

Not applicable

OpenStreetMap embed

- -***TODO*** +

Not applicable

Bing Maps embed

- -***TODO*** +

Not applicable

MapBox Studio embed

- -***TODO*** +

Not applicable

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+ + +
+ +

OpenLayers with OpenStreetMap tiles

- -***TODO*** +
+ + +
+ +

Google Maps API

- -***TODO*** +
+ +
+ +

Bing Maps Control API

- -***TODO*** +
+ +
+ +

MapKit JS (Apple Maps) API

- -***TODO*** +
+ +
+ +

Mapbox GL JS API

- -***TODO*** +
+ + +
+ +

TomTom Maps SDK for Web with vector maps

- -***TODO*** +
+ + + +
+ +
From 785cb8a5cd303ca8cfee345699717477aa8fa7f8 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 17:41:24 +0100 Subject: [PATCH 06/22] Static maps examples. --- examples/api-keys.js | 14 +++ examples/examples.css | 19 +++ examples/static-map.html | 265 +++++++++++++++++++++++---------------- 3 files changed, 188 insertions(+), 110 deletions(-) diff --git a/examples/api-keys.js b/examples/api-keys.js index 322af44..f61b382 100644 --- a/examples/api-keys.js +++ b/examples/api-keys.js @@ -13,4 +13,18 @@ m4h.keys = { 'httpslocalhost8000': 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlI2QlY1QTlDR1YifQ.eyJpc3MiOiI0M0IyM044WjYzIiwiaWF0IjoxNTY2MjM0OTIzLCJvcmlnaW4iOiJodHRwczovL2xvY2FsaG9zdDo4MDAwIiwiZXhwIjoxNTc3ODM2Nzk5fQ.mgp4OQhubUcXMXbeXSrFtqPX1o-3Vw2EBbV2pvieYZA-1xe7_PNZ281QsPPmeJqSORL-qY9DIjcCFeBVV7MFtQ', 'maps4html': 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlI2QlY1QTlDR1YifQ.eyJpc3MiOiI0M0IyM044WjYzIiwiaWF0IjoxNTY2MjM0OTIzLCJvcmlnaW4iOiJodHRwczovL21hcHM0aHRtbC5naXRodWIuaW8iLCJleHAiOjE1Nzc4MzY3OTl9.anN2upPaCdexpSw30j0wVHBV3hIDJPGrOtqJECO-UOcqOXUmEvyvqJBhT10YyjxT_VTSrJQwcjda-CVBddEd5g' }, + mapkitstatic: { + httpslocalhost8000: { + referer: 'https://localhost:8000/', + teamId: '43B23N8Z63', + keyId: 'R6BV5A9CGV', + signature: 'dIEhfVGXY4WHW2hq7FUWuqc41B0a0-zHJoom88pBZD_hfj3IohIHo06qv__qtxFOQjNbeeq0G_RZZgZ3yWQiQA' + }, + maps4html: { + referer: 'https://maps4html.github.io/', + teamId: '43B23N8Z63', + keyId: 'R6BV5A9CGV', + signature: 'F13h3nOYuw3Al2xPLd-VrVYIACvSV8UlPyMt_VGPDIkbUVezgbjzCInclURMbFznfR6WLTDnEy_XzhzvEmSufA' + } + } }; \ No newline at end of file diff --git a/examples/examples.css b/examples/examples.css index 420c412..af546be 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -271,3 +271,22 @@ iframe, min-height: 400px; } } + +.static-embed { + position: relative; + width: 600px; + height: 480px; +} + +.static-embed img { + position: absolute; + z-index: 0; +} + +.static-embed .static-streetview { + z-index: 1; + bottom: 24px; + left: 8px; + border: 4px solid #bbb; + border-radius: 4px; +} diff --git a/examples/static-map.html b/examples/static-map.html index d991082..4321641 100644 --- a/examples/static-map.html +++ b/examples/static-map.html @@ -5,143 +5,188 @@ - Static map display — Maps for HTML reference examples + Display a region of map data as a static image — Maps for HTML reference examples

Examples for - Use Case: Display a region of map data as a static image + Display a region of map data as a static image

-***Introduction*** +Static map APIs allow a non-interactive map to be embedded in a webpage as an image.

Jump to section…
-
-

Google Maps embed

- -***TODO*** -
- -
-

OpenStreetMap embed

- -***TODO*** -
- -
-

Bing Maps embed

- -***TODO*** -
- -
-

MapBox Studio embed

- -***TODO*** -
- -
-

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+

Google Static Maps & Static Street View images

+
+
+ Map: +
+ + + Streetview: +
+ + +
+
+
+
+
-
-

OpenLayers with OpenStreetMap tiles

- -***TODO*** +
+

Bing Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

Google Maps API

- -***TODO*** +
+

MapBox Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

Bing Maps Control API

- -***TODO*** -
- -
-

MapKit JS (Apple Maps) API

- -***TODO*** -
- -
-

Mapbox GL JS API

- -***TODO*** +
+

MapKit Snapshot image

+
+
+ Map: +
+ + +
+
+
+
+
-

TomTom Maps SDK for Web with vector maps

- -***TODO*** +

TomTom Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

D3 Geographies APIs

- -***TODO*** -
From d8013a8b58ba2a51b1f333af7a038689ac640ff8 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 20:24:11 +0100 Subject: [PATCH 07/22] Include marker in TomTom single location. --- examples/examples.css | 6 ++++++ examples/single-location.html | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/examples/examples.css b/examples/examples.css index af546be..05d2a70 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -272,6 +272,12 @@ iframe, } } +.icon-flag-white { + /* this seems to be missing from tomTom's stylesheet */ + background-image: url("data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M285.81%20179.765a11.96%2011.96%200%200%200-8.483-3.513%2011.97%2011.97%200%200%200-8.486%203.514%2011.962%2011.962%200%200%200-3.51%208.486c0%203.315%201.344%206.316%203.517%208.488%202.17%202.17%208.482%207.112%208.482%207.112s6.312-4.943%208.484-7.115a11.962%2011.962%200%200%200%203.515-8.485%2011.97%2011.97%200%200%200-3.518-8.487zM22.957%2013.3L13.03%208.53v9.535zM11.71%207.674c.01-1.144-1.99-1.202-1.99-.096v16.207h1.986%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); + background-repeat:no-repeat +} + .static-embed { position: relative; width: 600px; diff --git a/examples/single-location.html b/examples/single-location.html index 2d3c8da..926bbd9 100644 --- a/examples/single-location.html +++ b/examples/single-location.html @@ -304,7 +304,6 @@

Mapbox GL JS API

TomTom Maps SDK for Web with vector maps

-
From 0f8f06062b8c320c12bd2c27e4e85b0d90f1aaad Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 20:41:03 +0100 Subject: [PATCH 08/22] Examples for HTML annotations. --- examples/examples.css | 16 ++ examples/html-annotations.html | 319 +++++++++++++++++++++++++++------ 2 files changed, 284 insertions(+), 51 deletions(-) diff --git a/examples/examples.css b/examples/examples.css index 05d2a70..58b17e7 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -296,3 +296,19 @@ iframe, border: 4px solid #bbb; border-radius: 4px; } + +.popup.openlayers { + background-color: #f6f6f6; + color: #060606; + border: 1px solid #060606; + border-radius: 6px; + font-size: 0.8rem; + padding: 12px; + position: relative; +} + +.popup.openlayers .close { + position: absolute; + top: 8px; + right: 8px; +} diff --git a/examples/html-annotations.html b/examples/html-annotations.html index bcd5655..65a79e2 100644 --- a/examples/html-annotations.html +++ b/examples/html-annotations.html @@ -15,7 +15,7 @@

Examples for

-***Introduction*** +

@@ -42,97 +42,314 @@

Examples for

Google Maps embed

- -***TODO*** +

Not applicable

OpenStreetMap embed

- -***TODO*** +

Not applicable

-

Bing Maps embed

- -***TODO*** +

Bing Maps embed

+

Not applicable

MapBox Studio embed

- -***TODO*** +

Not applicable

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+ + +
+ +

OpenLayers with OpenStreetMap tiles

+
+ + +
+ +

Google Maps API

- -***TODO*** +
+ +
+ +

Bing Maps Control API

- -***TODO*** +
+ +
+ +

MapKit JS (Apple Maps) API

- -***TODO*** +
+ +
+ +

Mapbox GL JS API

+
+ + +
+ +

TomTom Maps SDK for Web with vector maps

- -***TODO*** +
+ + + +
+ +
From 1c4a6a1e36d36c091aaf59f3ec671f52ff7ff3c9 Mon Sep 17 00:00:00 2001 From: Amelia Bellamy-Royds Date: Tue, 15 Oct 2019 19:46:09 -0600 Subject: [PATCH 09/22] Move extra TomTom styles into their own file (to at least keep them contained, until we figure out a better way to sandbox styles) --- examples/create-map.html | 1 + examples/examples.css | 6 ------ examples/html-annotations.html | 1 + examples/multiple-location-markers.html | 11 +---------- examples/poly-features.html | 1 + examples/set-view-zoom.html | 1 + examples/tomtom/maps-extract.css | 13 +++++++++++++ 7 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 examples/tomtom/maps-extract.css diff --git a/examples/create-map.html b/examples/create-map.html index 7d3394b..c650890 100644 --- a/examples/create-map.html +++ b/examples/create-map.html @@ -249,6 +249,7 @@

TomTom Maps SDK for Web with vector maps

+
+
+ - -
+
+
+ + +

Examples for + + Use Case: Display an interactive map + +

+ +

+The embedded map viewers here show their default view, +which is generally a map of the whole globe +although it may be personalized to the viewer's location. +

+

+The JS API maps are the simplest viewers supported by each framework. +Some require an explicit position and zoom level to display anything; +the examples use a full-globe map (zoom 0) centered on 0° latitude and longitude. +Some frameworks also require explicit map tile source; +the examples in those cases use OpenStreetMap tiles. +

+ +
+ Jump to section… + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

OpenLayers (with OpenStreetMap tiles)

+
+
+ + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 437fd894fe9375e0ce972087d8d8521ec9ca3bf5 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Mon, 30 Sep 2019 19:31:16 +0100 Subject: [PATCH 12/22] Example to be added; this is a placeholder file. --- examples/show-and-hide-features-overlays.html | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 examples/show-and-hide-features-overlays.html diff --git a/examples/show-and-hide-features-overlays.html b/examples/show-and-hide-features-overlays.html new file mode 100644 index 0000000..b4e4411 --- /dev/null +++ b/examples/show-and-hide-features-overlays.html @@ -0,0 +1,10 @@ + + + + +Title + + + + + \ No newline at end of file From 585a5b89e9f51c047e0e554dd42ff91247074125 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Sat, 2 Nov 2019 15:49:05 +0000 Subject: [PATCH 13/22] Tidying up some badly laid-out lines. --- index.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 014400a..09ecc2e 100644 --- a/index.html +++ b/index.html @@ -1735,15 +1735,14 @@

Access additional information about a point on the map

Show/hide map layers or feature sets

A multi-layered map can be overwhelming. -Users sometimes want to remove overlays or features -that aren't relevant to them. -In addition, comparisons between two maps -(e.g., for before and after effects) -can often be seen more clearly +Users sometimes want to remove overlays or features that aren't relevant to them. +In addition, comparisons between two maps (e.g., for before and after effects) can often be seen more clearly by toggling between two states within the same display.

-Example to be expanded later: NLS old Ordnance Survey maps. +See +examples of allowing a user to show and hide overlays and features +as implemented by the reference JavaScript tools.

Discuss this section on GitHub. From 89dbb35aad2b124e398226633e9a97ad4ca0c74c Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Wed, 2 Oct 2019 11:21:53 +0100 Subject: [PATCH 14/22] Neither OSM nor Bing Maps support multiple markers in embeds. --- examples/multiple-location-markers.html | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/examples/multiple-location-markers.html b/examples/multiple-location-markers.html index 52f28e8..c9c80ba 100644 --- a/examples/multiple-location-markers.html +++ b/examples/multiple-location-markers.html @@ -54,18 +54,12 @@

Google Maps embed

OpenStreetMap embed

- - ***TODO*** +

Not applicable

Bing Maps embed

- - ***TODO*** +

Not applicable

From 23fe90142bac3456b0f5841d5942acdfb0748905 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Wed, 2 Oct 2019 19:51:37 +0100 Subject: [PATCH 15/22] Examples of displaying a GeoJSON polygon via the various APIs. --- examples/data/glooston.js | 28 ++++ examples/poly-features.html | 289 +++++++++++++++++++++++++++++------- 2 files changed, 265 insertions(+), 52 deletions(-) create mode 100644 examples/data/glooston.js diff --git a/examples/data/glooston.js b/examples/data/glooston.js new file mode 100644 index 0000000..a1d1c68 --- /dev/null +++ b/examples/data/glooston.js @@ -0,0 +1,28 @@ +m4h = m4h || {}; +m4h.geojson = m4h.geojson || {}; + +m4h.geojson.glooston = { + "type": "FeatureCollection", + "name": "Parish of Glooston", + "features": [ + { + "type": "Feature", + "properties": { + "osm_id": -6738314, + "admin_level": "10", + "name": "Glooston", + "boundary": "administrative", + "way_area": 10626800.0, + "z_order": 0, + "tags": "\"ref:gss\"=>\"E04005428\", \"designation\"=>\"civil_parish\", \"parish_type\"=>\"parish_meeting\"" + }, + "geometry": { + "type": "Polygon", + "coordinates": [ [ + [ -0.907666836058734, 52.547120571911258 ], [ -0.907636562833659, 52.547806194294637 ], [ -0.907620033832431, 52.548056000505035 ], [ -0.907538197310048, 52.548142473655282 ], [ -0.90750585795982, 52.548198793094876 ], [ -0.907373625949997, 52.548476292285038 ], [ -0.907084548091568, 52.549128080726327 ], [ -0.90698483509503, 52.549166700471822 ], [ -0.906844518247651, 52.54929129944734 ], [ -0.906431562711541, 52.549887195574556 ], [ -0.906391318186813, 52.550081000729662 ], [ -0.906124159221316, 52.550149498739302 ], [ -0.905631702782561, 52.550261804654532 ], [ -0.905786392674487, 52.550562669474182 ], [ -0.905972523601356, 52.550849384954553 ], [ -0.906282711868963, 52.551424011979222 ], [ -0.906452942615303, 52.551695263909075 ], [ -0.906588228897092, 52.551948270641624 ], [ -0.906715340509795, 52.551939585849198 ], [ -0.907004148873639, 52.551949363068225 ], [ -0.907089758320216, 52.55194837988428 ], [ -0.907271577333721, 52.551929371657181 ], [ -0.907275260426386, 52.552021080814868 ], [ -0.907255138164022, 52.552179209019577 ], [ -0.907212019030384, 52.552310900156918 ], [ -0.906955100859126, 52.55267811479122 ], [ -0.906811999234366, 52.552913200458235 ], [ -0.906800590630258, 52.553076678201251 ], [ -0.906657399173969, 52.553496102608449 ], [ -0.906653805912832, 52.553581472653725 ], [ -0.906664585696242, 52.553800987061905 ], [ -0.906650032988639, 52.553972490463387 ], [ -0.906624700497627, 52.554040600067758 ], [ -0.906511063614186, 52.554283215778568 ], [ -0.906466417344565, 52.554416812240646 ], [ -0.906420513433547, 52.554603278576749 ], [ -0.906374429859471, 52.554736874064339 ], [ -0.906398504709086, 52.554833274480366 ], [ -0.906660812772049, 52.554903075895865 ], [ -0.906595505250893, 52.555099371300095 ], [ -0.906492288824748, 52.555334007058434 ], [ -0.906400481002711, 52.555584862755794 ], [ -0.906333646345572, 52.555723589218353 ], [ -0.905870924142722, 52.556298316264311 ], [ -0.905690362770614, 52.556560963417176 ], [ -0.905617329738015, 52.556710391413787 ], [ -0.905142749773415, 52.557228415451455 ], [ -0.90490604369605, 52.557435677968463 ], [ -0.904801659460035, 52.557481499510025 ], [ -0.904650293334661, 52.557574398579114 ], [ -0.904203740806925, 52.557618909233277 ], [ -0.904028479494993, 52.557663092157 ], [ -0.903913944296268, 52.557704271257208 ], [ -0.903571686173018, 52.557880893113342 ], [ -0.903443406750446, 52.557939111540911 ], [ -0.903055963368405, 52.558042495481253 ], [ -0.902452295497477, 52.558230202519894 ], [ -0.902579047784066, 52.558473177357229 ], [ -0.90255793737489, 52.558490981259581 ], [ -0.902346204462423, 52.558639091970846 ], [ -0.902255654281783, 52.558723687429293 ], [ -0.901107876843264, 52.559315414173696 ], [ -0.900982382198072, 52.559379911087269 ], [ -0.901256997180428, 52.559666514345516 ], [ -0.901378359575312, 52.559768310479001 ], [ -0.90147915055019, 52.559829584647169 ], [ -0.901609406266388, 52.559908880502476 ], [ -0.901909263908227, 52.560073479017312 ], [ -0.902264278108511, 52.560324962947725 ], [ -0.902321680455166, 52.560390168317774 ], [ -0.902354558794565, 52.560787897132165 ], [ -0.902216936893038, 52.560925078059043 ], [ -0.902219182681248, 52.561007812367684 ], [ -0.902129351152836, 52.561184093265268 ], [ -0.901950586411296, 52.561485374683542 ], [ -0.901924984425699, 52.561567889498036 ], [ -0.90199334621882, 52.561725764862082 ], [ -0.902181004281673, 52.562006291217173 ], [ -0.90211273232008, 52.562141393205607 ], [ -0.901955347482302, 52.562598410550024 ], [ -0.901956425460643, 52.562968815545901 ], [ -0.90208218960042, 52.563069784904222 ], [ -0.902461637976432, 52.563355599556196 ], [ -0.903260150432486, 52.563932083244154 ], [ -0.90350089892863, 52.564449475953715 ], [ -0.903589742310229, 52.564555465622618 ], [ -0.903879898147, 52.564812602812161 ], [ -0.903708409759261, 52.564885610059676 ], [ -0.903708140264676, 52.564896367287815 ], [ -0.903729879494552, 52.564969374395915 ], [ -0.903919693514086, 52.565288485564629 ], [ -0.903825729735367, 52.565507013126243 ], [ -0.90380632612523, 52.565574285759624 ], [ -0.903798780276844, 52.565637080738256 ], [ -0.903797253140861, 52.565702715045909 ], [ -0.903856901275726, 52.566385699167391 ], [ -0.903872262467085, 52.56677867777546 ], [ -0.903839024801572, 52.567163080287976 ], [ -0.903743174560757, 52.567514663670103 ], [ -0.903553091046637, 52.567506582580364 ], [ -0.902764460058709, 52.567537978697672 ], [ -0.902381059095446, 52.567588376244181 ], [ -0.902223853920725, 52.567622884606671 ], [ -0.901756101152284, 52.567738967917855 ], [ -0.901374047661948, 52.567857671795096 ], [ -0.901097007228326, 52.567957592473071 ], [ -0.900529092305706, 52.568187900578515 ], [ -0.900177940861143, 52.568309606293731 ], [ -0.899953362040113, 52.568380369084579 ], [ -0.899837389536934, 52.568412474387223 ], [ -0.899679286046928, 52.568421865729803 ], [ -0.899603019079307, 52.568407669513498 ], [ -0.899194105961975, 52.568296884267525 ], [ -0.899059179006301, 52.568264178269054 ], [ -0.898735156683319, 52.568243211472563 ], [ -0.898463236646816, 52.568259482581126 ], [ -0.898309355238646, 52.568276081289682 ], [ -0.898155383998948, 52.568296174454794 ], [ -0.897895950544894, 52.568348591363922 ], [ -0.897767491459265, 52.568408597727782 ], [ -0.897737128402662, 52.568445180275098 ], [ -0.897710987427894, 52.568484492829256 ], [ -0.897681163360461, 52.568676577830153 ], [ -0.897600045490305, 52.568790911140752 ], [ -0.897452901446767, 52.568891102693676 ], [ -0.897105522926398, 52.569094706512097 ], [ -0.896991526716843, 52.569170873425669 ], [ -0.896776559869353, 52.569329813419287 ], [ -0.89672131347938, 52.569351762490271 ], [ -0.896666336583992, 52.569371090767582 ], [ -0.896436906860427, 52.56939860897819 ], [ -0.895172617929558, 52.569509992035222 ], [ -0.894858387243173, 52.569563663279844 ], [ -0.894856949938718, 52.569563663279844 ], [ -0.894590329962391, 52.569607015183287 ], [ -0.894199832308385, 52.569820989504628 ], [ -0.894006784353827, 52.569867671694233 ], [ -0.893953424425951, 52.569878864492537 ], [ -0.892938417986424, 52.56998899055575 ], [ -0.891669547647605, 52.570806874032179 ], [ -0.891112322676866, 52.571137899570147 ], [ -0.891034528573261, 52.571180376359159 ], [ -0.890946763170003, 52.571210077328573 ], [ -0.89029243031705, 52.571408865835757 ], [ -0.890131631881193, 52.571527887361505 ], [ -0.889891602037276, 52.571505884782688 ], [ -0.889752452999766, 52.571525266707546 ], [ -0.888707263166693, 52.571780670539511 ], [ -0.888321885909805, 52.571903785792905 ], [ -0.888040174236705, 52.572012596458592 ], [ -0.887924381396582, 52.572043006616433 ], [ -0.887842904200313, 52.572055672959614 ], [ -0.887690729591183, 52.572065063522025 ], [ -0.887603862503209, 52.57205976768185 ], [ -0.887183001792599, 52.571951612290356 ], [ -0.887046188374827, 52.571935014972951 ], [ -0.886940007508244, 52.571933977640406 ], [ -0.886765375017011, 52.571951175518933 ], [ -0.886477375136923, 52.572022205415593 ], [ -0.885735546375297, 52.571892102142897 ], [ -0.884898316530497, 52.572321992897137 ], [ -0.884405231271044, 52.572273293267209 ], [ -0.883550484278205, 52.5725781018321 ], [ -0.882919777117224, 52.572719613524633 ], [ -0.882786916286703, 52.572663489343192 ], [ -0.882434776695328, 52.57258377977918 ], [ -0.881716663457203, 52.572511385898892 ], [ -0.8811873760918, 52.572431785250046 ], [ -0.88082984660872, 52.572394168706587 ], [ -0.880623413756429, 52.572385105789984 ], [ -0.880430096307287, 52.572386907454273 ], [ -0.880302984694584, 52.57239291300138 ], [ -0.88015952374371, 52.572408582015875 ], [ -0.879977345404091, 52.572435606958024 ], [ -0.879812684212512, 52.572469074186529 ], [ -0.876991255568149, 52.572360592229067 ], [ -0.875546135770586, 52.572321665321326 ], [ -0.875631296059521, 52.572047374321393 ], [ -0.875698220548187, 52.571915906211572 ], [ -0.87599277812985, 52.571356780167363 ], [ -0.876300181620076, 52.57087686842484 ], [ -0.87632371748052, 52.570824072352742 ], [ -0.876339797324105, 52.570770293454892 ], [ -0.876347522835549, 52.570699370726338 ], [ -0.876344917721225, 52.570628284088855 ], [ -0.87633557524227, 52.570587772297664 ], [ -0.876297307011167, 52.570527168335303 ], [ -0.876166691968856, 52.57038477599329 ], [ -0.87641309985129, 52.570155189207377 ], [ -0.876607944436415, 52.569862211791587 ], [ -0.877124296061727, 52.569230605665346 ], [ -0.877288328432607, 52.569105298907999 ], [ -0.877822376869016, 52.568528664809854 ], [ -0.878081091670843, 52.56833428592202 ], [ -0.878249346123558, 52.568219896819905 ], [ -0.878430805810951, 52.568103869382888 ], [ -0.878576153223921, 52.568017981581207 ], [ -0.878842234211077, 52.567881205046312 ], [ -0.878955601599933, 52.567831899867464 ], [ -0.879621702383108, 52.567572978516729 ], [ -0.879774595644465, 52.567477370520606 ], [ -0.879834782768501, 52.567431177205094 ], [ -0.879852838905712, 52.567302807582259 ], [ -0.87985292873724, 52.56712747951503 ], [ -0.879865145825104, 52.567053875371357 ], [ -0.879921649856475, 52.566917805664765 ], [ -0.879969530061119, 52.566833662829978 ], [ -0.880038341011882, 52.566739090677636 ], [ -0.880126555572783, 52.566636491674352 ], [ -0.880356883611631, 52.566395964597525 ], [ -0.880423448774184, 52.566333662136202 ], [ -0.880696985778199, 52.56613490522637 ], [ -0.880735792998473, 52.566060589568018 ], [ -0.880772444262065, 52.566011500757689 ], [ -0.880866138546199, 52.565925172026958 ], [ -0.880912761109444, 52.565892409655831 ], [ -0.88096504305898, 52.56586407018505 ], [ -0.881023074226334, 52.565842173972563 ], [ -0.881073559545302, 52.565831908412811 ], [ -0.881114882048371, 52.56582950583465 ], [ -0.88130334859498, 52.565845668630658 ], [ -0.881344581266521, 52.565846105462889 ], [ -0.881504750881679, 52.565818803439427 ], [ -0.88161784877595, 52.565778614829973 ], [ -0.881665728980593, 52.565752896284764 ], [ -0.881811705214263, 52.565636480091058 ], [ -0.881993524227769, 52.565507886797477 ], [ -0.882175522904331, 52.565428710272066 ], [ -0.882310629523063, 52.565340086998589 ], [ -0.882427500341527, 52.565210782973345 ], [ -0.882706157742661, 52.564812493601529 ], [ -0.882877556298871, 52.564567806494786 ], [ -0.882859230667075, 52.564477707127025 ], [ -0.882857883194148, 52.564411197293175 ], [ -0.882867046010046, 52.564344687358485 ], [ -0.88288609029407, 52.564287405732912 ], [ -0.882914117730934, 52.56423099772919 ], [ -0.883047248056041, 52.564044299278869 ], [ -0.883204722725347, 52.563883101264544 ], [ -0.88330129161839, 52.563797696656444 ], [ -0.883472420680015, 52.563682367407694 ], [ -0.883508353291379, 52.563662982016517 ], [ -0.883785124230417, 52.563571187977431 ], [ -0.883864086143891, 52.563537768565119 ], [ -0.883967482233093, 52.563182767647817 ], [ -0.884001438550832, 52.562951068068422 ], [ -0.884056235783164, 52.562829402090998 ], [ -0.88415828439944, 52.562350270764057 ], [ -0.884201223870021, 52.561997280762554 ], [ -0.884242276878505, 52.561832307202785 ], [ -0.884279826457381, 52.561749082966976 ], [ -0.88434324751644, 52.561633693722648 ], [ -0.884427419658562, 52.561513990030562 ], [ -0.884748028383464, 52.561143900409199 ], [ -0.884924726999851, 52.560693366554304 ], [ -0.884952305279073, 52.560534504483144 ], [ -0.884949700164749, 52.56046258220811 ], [ -0.884887177420974, 52.56019138447494 ], [ -0.884839297216331, 52.560162986709578 ], [ -0.884783960994829, 52.5601365003157 ], [ -0.884228802149243, 52.559979274567986 ], [ -0.884053001848141, 52.559931762682012 ], [ -0.883725925253193, 52.559857709570935 ], [ -0.883926519056137, 52.559451398241393 ], [ -0.88404060509722, 52.559256487613453 ], [ -0.884261141499471, 52.559055404909337 ], [ -0.884608609851369, 52.558848313882386 ], [ -0.88444565545883, 52.558817075383132 ], [ -0.884596033437391, 52.558588411075782 ], [ -0.884690626036809, 52.55840398236753 ], [ -0.88473131971918, 52.557964780053858 ], [ -0.884721977240225, 52.557517872713944 ], [ -0.884762491259539, 52.557314215152367 ], [ -0.884806688371517, 52.557201271908347 ], [ -0.884897687709799, 52.557043981026084 ], [ -0.885387898360343, 52.556420382666282 ], [ -0.885455541501237, 52.556334471985664 ], [ -0.886258186207598, 52.555277587541177 ], [ -0.886996511539615, 52.554252465594992 ], [ -0.887644107027937, 52.553375666657537 ], [ -0.887792778207459, 52.553095685931389 ], [ -0.888285324477742, 52.552105088201479 ], [ -0.889203223035055, 52.550157364532609 ], [ -0.889354499328901, 52.549863106429804 ], [ -0.88947676003907, 52.549625382460007 ], [ -0.889598751254653, 52.54938798494959 ], [ -0.890128487777698, 52.548266365401808 ], [ -0.890427357272725, 52.547646193024953 ], [ -0.890690024661801, 52.547168589316456 ], [ -0.891214910282312, 52.54611809415475 ], [ -0.892933656915418, 52.545800591657148 ], [ -0.893168835856801, 52.545771310512784 ], [ -0.893322447770385, 52.54576196894957 ], [ -0.8935716404302, 52.545761586546355 ], [ -0.894623298133319, 52.545810097099064 ], [ -0.895452443140561, 52.545854674316452 ], [ -0.895453880445016, 52.545854674316452 ], [ -0.895907978821138, 52.545858006680149 ], [ -0.896123035500156, 52.545871663905771 ], [ -0.896330546330788, 52.545888107199772 ], [ -0.89672409825676, 52.545951094245744 ], [ -0.896836208004219, 52.545539409714991 ], [ -0.897188886584764, 52.543822868679342 ], [ -0.897348337547695, 52.543170782921003 ], [ -0.897399182192776, 52.543021964404709 ], [ -0.897998807644926, 52.54257266491274 ], [ -0.899135805300036, 52.541742672531448 ], [ -0.899236236948801, 52.54167798578883 ], [ -0.89933810590202, 52.541615976026321 ], [ -0.900230132979151, 52.541265605563915 ], [ -0.901381503678807, 52.541508182635958 ], [ -0.902243077867806, 52.541429891578794 ], [ -0.902617046520585, 52.54139738408557 ], [ -0.902662321610904, 52.541414867110127 ], [ -0.903036380095212, 52.541253804482977 ], [ -0.903159628952193, 52.54127839006469 ], [ -0.903410438579519, 52.541157483504648 ], [ -0.903514014331778, 52.541201573734796 ], [ -0.903781622454917, 52.541526867571044 ], [ -0.904040876245914, 52.541889801735493 ], [ -0.904322408255957, 52.542369812115339 ], [ -0.904426792491972, 52.542736563606532 ], [ -0.904492818665354, 52.542810973411527 ], [ -0.904544920951833, 52.543027209118705 ], [ -0.904566660181709, 52.543578501550407 ], [ -0.904568816138391, 52.543788013804267 ], [ -0.904494705127451, 52.544986612271174 ], [ -0.90455758719734, 52.545242498424408 ], [ -0.904663947726979, 52.545532963456232 ], [ -0.904837232745286, 52.545800700915109 ], [ -0.904977459761137, 52.545855111347763 ], [ -0.905343702902473, 52.546008563700596 ], [ -0.905686140688779, 52.546237402827188 ], [ -0.905701591711666, 52.546323005507276 ], [ -0.90635754153213, 52.547051796036875 ], [ -0.906574394841716, 52.547283961979716 ], [ -0.907666836058734, 52.547120571911258 ] + ] ] + } + } + ] +}; + diff --git a/examples/poly-features.html b/examples/poly-features.html index 1a6378f..c146f98 100644 --- a/examples/poly-features.html +++ b/examples/poly-features.html @@ -8,6 +8,7 @@ Display routes/paths or regions — Maps for HTML reference examples +

Examples for @@ -15,7 +16,10 @@

Examples for

-***Introduction*** +These examples show the boundary of the parish of Glooston, Leicestershire, UK. +The boundary is defined as a GeoJSON object in the file +/examples/data/glooston.js. +This was exported from OpenStreetMap data.

@@ -42,97 +46,278 @@

Examples for

Google Maps embed

- -***TODO*** +

Not applicable

OpenStreetMap embed

- -***TODO*** +

Not applicable

Bing Maps embed

- -***TODO*** +

Not applicable

MapBox Studio embed

- -***TODO*** +

Not applicable

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+ + +
+ +

OpenLayers with OpenStreetMap tiles

- -***TODO*** +
+ + +
+ +

Google Maps API

- -***TODO*** +
+ +
+ +

Bing Maps Control API

- -***TODO*** +
+ +
+ +

MapKit JS (Apple Maps) API

- -***TODO*** +
+ +
+ +

Mapbox GL JS API

- -***TODO*** +
+ + +
+ +

TomTom Maps SDK for Web with vector maps

- -***TODO*** +
+ + + +
+ +
From 727c7a852e58238a461938af2f2fce724c14e699 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 17:41:24 +0100 Subject: [PATCH 16/22] Static maps examples. --- examples/api-keys.js | 14 +++ examples/examples.css | 19 +++ examples/static-map.html | 265 +++++++++++++++++++++++---------------- 3 files changed, 188 insertions(+), 110 deletions(-) diff --git a/examples/api-keys.js b/examples/api-keys.js index 4a875bd..5b1fd8e 100644 --- a/examples/api-keys.js +++ b/examples/api-keys.js @@ -13,4 +13,18 @@ m4h.keys = { 'httpslocalhost8000': 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlI2QlY1QTlDR1YifQ.eyJpc3MiOiI0M0IyM044WjYzIiwiaWF0IjoxNTY2MjM0OTIzLCJvcmlnaW4iOiJodHRwczovL2xvY2FsaG9zdDo4MDAwIiwiZXhwIjoxNTc3ODM2Nzk5fQ.mgp4OQhubUcXMXbeXSrFtqPX1o-3Vw2EBbV2pvieYZA-1xe7_PNZ281QsPPmeJqSORL-qY9DIjcCFeBVV7MFtQ', 'maps4html': 'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlI2QlY1QTlDR1YifQ.eyJpc3MiOiI0M0IyM044WjYzIiwiaWF0IjoxNTY2MjM0OTIzLCJvcmlnaW4iOiJodHRwczovL21hcHM0aHRtbC5naXRodWIuaW8iLCJleHAiOjE1Nzc4MzY3OTl9.anN2upPaCdexpSw30j0wVHBV3hIDJPGrOtqJECO-UOcqOXUmEvyvqJBhT10YyjxT_VTSrJQwcjda-CVBddEd5g' }, + mapkitstatic: { + httpslocalhost8000: { + referer: 'https://localhost:8000/', + teamId: '43B23N8Z63', + keyId: 'R6BV5A9CGV', + signature: 'dIEhfVGXY4WHW2hq7FUWuqc41B0a0-zHJoom88pBZD_hfj3IohIHo06qv__qtxFOQjNbeeq0G_RZZgZ3yWQiQA' + }, + maps4html: { + referer: 'https://maps4html.github.io/', + teamId: '43B23N8Z63', + keyId: 'R6BV5A9CGV', + signature: 'F13h3nOYuw3Al2xPLd-VrVYIACvSV8UlPyMt_VGPDIkbUVezgbjzCInclURMbFznfR6WLTDnEy_XzhzvEmSufA' + } + } }; \ No newline at end of file diff --git a/examples/examples.css b/examples/examples.css index 420c412..af546be 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -271,3 +271,22 @@ iframe, min-height: 400px; } } + +.static-embed { + position: relative; + width: 600px; + height: 480px; +} + +.static-embed img { + position: absolute; + z-index: 0; +} + +.static-embed .static-streetview { + z-index: 1; + bottom: 24px; + left: 8px; + border: 4px solid #bbb; + border-radius: 4px; +} diff --git a/examples/static-map.html b/examples/static-map.html index d991082..4321641 100644 --- a/examples/static-map.html +++ b/examples/static-map.html @@ -5,143 +5,188 @@ - Static map display — Maps for HTML reference examples + Display a region of map data as a static image — Maps for HTML reference examples

Examples for - Use Case: Display a region of map data as a static image + Display a region of map data as a static image

-***Introduction*** +Static map APIs allow a non-interactive map to be embedded in a webpage as an image.

Jump to section…
-
-

Google Maps embed

- -***TODO*** -
- -
-

OpenStreetMap embed

- -***TODO*** -
- -
-

Bing Maps embed

- -***TODO*** -
- -
-

MapBox Studio embed

- -***TODO*** -
- -
-

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+

Google Static Maps & Static Street View images

+
+
+ Map: +
+ + + Streetview: +
+ + +
+
+
+
+
-
-

OpenLayers with OpenStreetMap tiles

- -***TODO*** +
+

Bing Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

Google Maps API

- -***TODO*** +
+

MapBox Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

Bing Maps Control API

- -***TODO*** -
- -
-

MapKit JS (Apple Maps) API

- -***TODO*** -
- -
-

Mapbox GL JS API

- -***TODO*** +
+

MapKit Snapshot image

+
+
+ Map: +
+ + +
+
+
+
+
-

TomTom Maps SDK for Web with vector maps

- -***TODO*** +

TomTom Static Map image

+
+
+ Map: +
+ + +
+
+
+
+
-
-

D3 Geographies APIs

- -***TODO*** -
From 52246d5f4a02ea05059fb1964142f838136ca15d Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 20:24:11 +0100 Subject: [PATCH 17/22] Include marker in TomTom single location. --- examples/examples.css | 6 ++++++ examples/single-location.html | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/examples/examples.css b/examples/examples.css index af546be..05d2a70 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -272,6 +272,12 @@ iframe, } } +.icon-flag-white { + /* this seems to be missing from tomTom's stylesheet */ + background-image: url("data:image/svg+xml;charset%3DUS-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M285.81%20179.765a11.96%2011.96%200%200%200-8.483-3.513%2011.97%2011.97%200%200%200-8.486%203.514%2011.962%2011.962%200%200%200-3.51%208.486c0%203.315%201.344%206.316%203.517%208.488%202.17%202.17%208.482%207.112%208.482%207.112s6.312-4.943%208.484-7.115a11.962%2011.962%200%200%200%203.515-8.485%2011.97%2011.97%200%200%200-3.518-8.487zM22.957%2013.3L13.03%208.53v9.535zM11.71%207.674c.01-1.144-1.99-1.202-1.99-.096v16.207h1.986%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); + background-repeat:no-repeat +} + .static-embed { position: relative; width: 600px; diff --git a/examples/single-location.html b/examples/single-location.html index bda4047..05c6883 100644 --- a/examples/single-location.html +++ b/examples/single-location.html @@ -304,7 +304,6 @@

Mapbox GL JS API

TomTom Maps SDK for Web with vector maps

-
From 260f0a5bf66e6557b2e16323556c440095b76886 Mon Sep 17 00:00:00 2001 From: Nick Fitzsimons Date: Thu, 3 Oct 2019 20:41:03 +0100 Subject: [PATCH 18/22] Examples for HTML annotations. --- examples/examples.css | 16 ++ examples/html-annotations.html | 319 +++++++++++++++++++++++++++------ 2 files changed, 284 insertions(+), 51 deletions(-) diff --git a/examples/examples.css b/examples/examples.css index 05d2a70..58b17e7 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -296,3 +296,19 @@ iframe, border: 4px solid #bbb; border-radius: 4px; } + +.popup.openlayers { + background-color: #f6f6f6; + color: #060606; + border: 1px solid #060606; + border-radius: 6px; + font-size: 0.8rem; + padding: 12px; + position: relative; +} + +.popup.openlayers .close { + position: absolute; + top: 8px; + right: 8px; +} diff --git a/examples/html-annotations.html b/examples/html-annotations.html index bcd5655..65a79e2 100644 --- a/examples/html-annotations.html +++ b/examples/html-annotations.html @@ -15,7 +15,7 @@

Examples for

-***Introduction*** +

@@ -42,97 +42,314 @@

Examples for

Google Maps embed

- -***TODO*** +

Not applicable

OpenStreetMap embed

- -***TODO*** +

Not applicable

-

Bing Maps embed

- -***TODO*** +

Bing Maps embed

+

Not applicable

MapBox Studio embed

- -***TODO*** +

Not applicable

Leaflet.js (with OpenStreetMap tiles)

- -***TODO*** +
+ + +
+ +

OpenLayers with OpenStreetMap tiles

+
+ + +
+ +

Google Maps API

- -***TODO*** +
+ +
+ +

Bing Maps Control API

- -***TODO*** +
+ +
+ +

MapKit JS (Apple Maps) API

- -***TODO*** +
+ +
+ +

Mapbox GL JS API

+
+ + +
+ +

TomTom Maps SDK for Web with vector maps

- -***TODO*** +
+ + + +
+ +
From 33487ee6ffa24b1d7149628215735dabb599e919 Mon Sep 17 00:00:00 2001 From: Amelia Bellamy-Royds Date: Tue, 15 Oct 2019 19:46:09 -0600 Subject: [PATCH 19/22] Move extra TomTom styles into their own file (to at least keep them contained, until we figure out a better way to sandbox styles) --- examples/create-map.html | 1 + examples/examples.css | 6 ------ examples/html-annotations.html | 1 + examples/multiple-location-markers.html | 11 +---------- examples/poly-features.html | 1 + examples/set-view-zoom.html | 1 + examples/tomtom/maps-extract.css | 13 +++++++++++++ 7 files changed, 18 insertions(+), 16 deletions(-) create mode 100644 examples/tomtom/maps-extract.css diff --git a/examples/create-map.html b/examples/create-map.html index 7d3394b..c650890 100644 --- a/examples/create-map.html +++ b/examples/create-map.html @@ -249,6 +249,7 @@

TomTom Maps SDK for Web with vector maps

+
+
+ - -
+
+
- - -

Examples for - - Use Case: Display an interactive map - -

- -

-The embedded map viewers here show their default view, -which is generally a map of the whole globe -although it may be personalized to the viewer's location. -

-

-The JS API maps are the simplest viewers supported by each framework. -Some require an explicit position and zoom level to display anything; -the examples use a full-globe map (zoom 0) centered on 0° latitude and longitude. -Some frameworks also require explicit map tile source; -the examples in those cases use OpenStreetMap tiles. -

- -
- Jump to section… - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

OpenLayers (with OpenStreetMap tiles)

-
-
- - - -
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -