|
1 | | -<!DOCTYPE html> |
2 | | -<html> |
3 | | - <head> |
4 | | - <meta charset="utf-8" /> |
5 | | - <title>MapML Features in-line as HTML layers</title> |
6 | | - <link rel='icon' href='MapsForHTML_16x16.png' sizes='16x16'> |
7 | | - <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> |
8 | | - <link rel="import" href="../web-map.html"> |
9 | | - </head> |
10 | | - <body> |
11 | | - <div> |
12 | | - <p>This document illustrates including MapML features directly into the HTML document as child content of the <layer-> element. |
13 | | - The use case is to make it 'easy' for HTML authors to include content such as placemarks on a map. They might not 'own' a map service |
14 | | - but they would be able to provide location for stuff like images, buildings, areas, linear features etc., *and* be able to |
15 | | - style those representations with CSS.</p> |
16 | | - |
17 | | - <p>This leverages default values for, for example, projection (WGS84). Further, we need to think about how an HTML author would be |
18 | | - required to mark up extent information in order to control the scales at which a layer should be enabled. We've opted for allowing |
19 | | - the <meta> element for this purpose; it's as though it was a server-side MapML document with no server smarts (no extent element), |
20 | | - just manually marked up with the <meta> element.</p> |
21 | | - |
22 | | - <p>There's lots left to do here, here's my list:</p> |
23 | | - <ul> |
24 | | - <li>Bug fixes</li> |
25 | | - <li>Enable author-supplied CSS</li> |
26 | | - <li>Inline georeferenced images</li> |
27 | | - <li>Inline tiles?</li> |
28 | | - <li>MultiPoint, MultiLineString, MultiPolygon, etc</li> |
29 | | - <li>Non-WGS84 feature coordinates</li> |
30 | | - <li>LMK</li> |
31 | | - </ul> |
32 | | - |
33 | | - <pre> |
34 | | - <map is="web-map" zoom="16" lat="45.399627" lon="-75.706143" width="400" height="300" controls projection="CBMTILE"> |
35 | | - <layer- label="cbmt_en" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked HIDDEN></layer-> |
36 | | - <layer- label="Point" > |
37 | | - <!-- in HTML the meta element is void (no closing tag), and since this is |
38 | | - being parsed by the HTML parser, we should be able to get away with |
39 | | - that when including features in "HTML" content --> |
40 | | - <meta name="zoom" content="min=14,max=18"> |
41 | | - <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46"> |
42 | | - <feature><properties><name>Canada Centre for Mapping and Earth Observation</name></properties><geometry><Point><coordinates>-75.705961 45.398511</coordinates></Point></geometry></feature> |
43 | | - </layer-> |
44 | | - <-- ommitting line and polygon markup for brevity. Note that you get a nasty FOUC (Flash Of Unstyled Content) in IE --> |
45 | | - <-- very easy to get carried away with all this GIS-y stuff, so awaiting your comments :-) --> |
46 | | - </map> |
47 | | - </pre> |
48 | | - </div> |
49 | | - <map is="web-map" zoom="16" lat="45.399627" lon="-75.706143" width="400" height="300" controls projection="CBMTILE"> |
50 | | - <layer- label="cbmt_en" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked HIDDEN></layer-> |
51 | | - <layer- label="Point" > |
52 | | - <!-- in HTML the meta element is void (no closing tag), and since this is |
53 | | - being parsed by the HTML parser, we should be able to get away with |
54 | | - that when including features in "HTML" content --> |
55 | | - <meta name="zoom" content="min=14,max=18"> |
56 | | - <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46"> |
57 | | - <feature><properties><name>Canada Centre for Mapping and Earth Observation</name></properties><geometry><Point><coordinates>-75.705961 45.398511</coordinates></Point></geometry></feature> |
58 | | - </layer-> |
59 | | - <layer- label="Line" > |
60 | | -<!-- <meta name="zoom" content="min=14,max=18"> |
61 | | - <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46">--> |
62 | | -<feature class="paved_multiple_lane"><properties><name>Booth Street</name><code>1760011</code><nolanes>2</nolanes><pavstatus>1</pavstatus><r_placenam>City Of Ottawa</r_placenam><l_placenam>City Of Ottawa</l_placenam></properties><geometry><LineString><coordinates>-75.7043047 45.3991258 -75.7054911 45.4010507 -75.7098477 45.4083249 -75.7150564 45.4170017 -75.7156161 45.4179239 -75.7162458 45.4185545 -75.7162458 45.4185545</coordinates></LineString></geometry></feature> |
63 | | - </layer-> |
64 | | - <layer- label="Polygon" > |
65 | | - <meta name="zoom" content="min=14,max=18"> |
66 | | - <meta name="extent" content="xmin=-75.70522069931032,ymin=45.393552994546624,xmax=-75.69988310337068,ymax=45.39590736566621"/> |
67 | | - <feature class="_1481312"><properties><accuracy>5</accuracy><code>1481312</code><definition>4</definition><isolated>0</isolated><lakgeodb>ONTARIO GEOGRAPHIC NAMED EXTENT LAYER</lakgeodb><laklang>-1</laklang><laknameen>Dows Lake</laknameen><laknamefr>Dows Lake</laknamefr><laknameid>3c139b39c6ce11d892e2080020a0f4c9</laknameid><permanency>1</permanency><rivlang>0.0</rivlang><theme>HD</theme><valdate>198805</valdate></properties><geometry><Polygon><coordinates>-75.7004373 45.3910771 -75.7009141 45.391092 -75.7013957 45.3911071 -75.7013962 45.3911431 -75.7013484 45.3914135 -75.7013647 45.3916924 -75.7017012 45.3920504 -75.7021009 45.3923449 -75.7022552 45.3924249 -75.7026795 45.3926473 -75.7030646 45.392798 -75.7031677 45.3928693 -75.7035397 45.392993 -75.7036428 45.3930644 -75.7038225 45.3931352 -75.7038613 45.393171 -75.7038889 45.3933329 -75.7039081 45.393366 -75.7039411 45.3934225 -75.7038435 45.3937922 -75.7037934 45.3938735 -75.7037427 45.3939099 -75.703679 45.3939193 -75.7036022 45.3939107 -75.703307 45.3937956 -75.7027689 45.3936729 -75.7025642 45.3936472 -75.7025003 45.3936476 -75.7024494 45.3936659 -75.7024116 45.3937112 -75.7024255 45.3938011 -75.7024645 45.3938549 -75.7027218 45.3939973 -75.7028124 45.3940957 -75.7031088 45.3943009 -75.7034942 45.3944695 -75.7036618 45.3945945 -75.7036876 45.3946123 -75.7038943 45.3948001 -75.7039713 45.3948266 -75.7041248 45.3948436 -75.7043172 45.3949054 -75.704381 45.394896 -75.7044317 45.3948687 -75.7044957 45.3948773 -75.7045728 45.3949128 -75.7047796 45.3951006 -75.704921 45.3951717 -75.7050113 45.3952431 -75.7050374 45.395288 -75.7052303 45.3953858 -75.7053726 45.3955289 -75.7054627 45.3955824 -75.7056823 45.395779 -75.7056961 45.39586 -75.7058502 45.395922 -75.7058763 45.3959668 -75.7059536 45.3960204 -75.7059674 45.3961013 -75.7058916 45.3961738 -75.7058022 45.3961743 -75.7055454 45.3960679 -75.7054306 45.3960867 -75.7052292 45.396331 -75.7052564 45.3964568 -75.7055005 45.3965723 -75.7055268 45.3966262 -75.7056423 45.3966704 -75.7057188 45.396661 -75.7057818 45.3965885 -75.7057684 45.3965346 -75.7059826 45.3962992 -75.7059692 45.3962453 -75.7060321 45.3961729 -75.7061469 45.3961542 -75.7063395 45.396234 -75.70638 45.3964048 -75.7054853 45.3974006 -75.7053331 45.3974915 -75.7051679 45.3975646 -75.7049769 45.3976108 -75.7047726 45.3976211 -75.704765 45.3976206 -75.7046447 45.3976129 -75.7046317 45.3975949 -75.7045421 45.3975775 -75.7044273 45.3975962 -75.7044018 45.3975964 -75.7043374 45.3975608 -75.7042854 45.3974891 -75.7038487 45.3973028 -75.7036813 45.3971958 -75.7033225 45.397108 -75.7029632 45.3969843 -75.7023094 45.3967993 -75.7017835 45.3966316 -75.701693 45.3965511 -75.7014103 45.3964179 -75.7010758 45.3962309 -75.7006887 45.3959183 -75.7005848 45.3957839 -75.7004557 45.3956677 -75.7002626 45.3955519 -75.6998627 45.3952393 -75.6995528 45.3949712 -75.6993328 45.3947475 -75.6992298 45.3946851 -75.6990886 45.394632 -75.6988679 45.3944852 -75.6987666 45.3944179 -75.6984065 45.3942221 -75.697983 45.3940717 -75.6975088 45.3939486 -75.6973425 45.3939316 -75.6971763 45.3939236 -75.6970359 45.3939334 -75.6969467 45.393952 -75.6969125 45.3938768 -75.6968285 45.3936917 -75.6969299 45.393628 -75.697209 45.3934643 -75.6973865 45.3933552 -75.6983865 45.392602 -75.6996907 45.3916579 -75.7004377 45.3911131 -75.7004373 45.3910771</coordinates><coordinates>-75.7043714 45.3951571 -75.7043974 45.395193 -75.7044615 45.3952106 -75.7045003 45.3952463 -75.7045389 45.3952641 -75.7046027 45.3952637 -75.7046677 45.3953533 -75.7047317 45.3953619 -75.7047955 45.3953525 -75.7048077 45.3953075 -75.7047303 45.3952449 -75.7046662 45.3952273 -75.7045632 45.3951649 -75.7043714 45.3951571</coordinates></Polygon></geometry></feature> |
68 | | - </layer-> |
69 | | - </map> |
70 | | - </body> |
71 | | -</html> |
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <title>MapML Features in-line as HTML layers</title> |
| 6 | + <link rel='icon' href='MapsForHTML_16x16.png' sizes='16x16'> |
| 7 | + <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> |
| 8 | + <link rel="import" href="../web-map.html"> |
| 9 | + </head> |
| 10 | + <body> |
| 11 | + <div> |
| 12 | + <p>This document illustrates including MapML features directly into the HTML document as child content of the <layer-> element. |
| 13 | + The use case is to make it 'easy' for HTML authors to include content such as placemarks on a map. They might not 'own' a map service |
| 14 | + but they would be able to provide location for stuff like images, buildings, areas, linear features etc., *and* be able to |
| 15 | + style those representations with CSS.</p> |
| 16 | + |
| 17 | + <p>This leverages default values for, for example, projection (WGS84). Further, we need to think about how an HTML author would be |
| 18 | + required to mark up extent information in order to control the scales at which a layer should be enabled. We've opted for allowing |
| 19 | + the <meta> element for this purpose; it's as though it was a server-side MapML document with no server smarts (no extent element), |
| 20 | + just manually marked up with the <meta> element.</p> |
| 21 | + |
| 22 | + <p>There's lots left to do here, here's my list:</p> |
| 23 | + <ul> |
| 24 | + <li>Bug fixes</li> |
| 25 | + <li>Enable author-supplied CSS</li> |
| 26 | + <li>Inline georeferenced images</li> |
| 27 | + <li>Inline tiles?</li> |
| 28 | + <li>MultiPoint, MultiLineString, MultiPolygon, etc</li> |
| 29 | + <li>Non-WGS84 feature coordinates</li> |
| 30 | + <li>LMK</li> |
| 31 | + </ul> |
| 32 | + |
| 33 | + <pre> |
| 34 | + <map is="web-map" zoom="16" lat="45.399627" lon="-75.706143" width="400" height="300" controls projection="CBMTILE"> |
| 35 | + <layer- label="cbmt_en" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked HIDDEN></layer-> |
| 36 | + <layer- label="Point" > |
| 37 | + <!-- in HTML the meta element is void (no closing tag), and since this is |
| 38 | + being parsed by the HTML parser, we should be able to get away with |
| 39 | + that when including features in "HTML" content --> |
| 40 | + <meta name="zoom" content="min=14,max=18"> |
| 41 | + <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46"> |
| 42 | + <feature><properties><name>Canada Centre for Mapping and Earth Observation</name></properties><geometry><Point><coordinates>-75.705961 45.398511</coordinates></Point></geometry></feature> |
| 43 | + </layer-> |
| 44 | + <-- ommitting line and polygon markup for brevity. Note that you get a nasty FOUC (Flash Of Unstyled Content) in IE --> |
| 45 | + <-- very easy to get carried away with all this GIS-y stuff, so awaiting your comments :-) --> |
| 46 | + </map> |
| 47 | + </pre> |
| 48 | + </div> |
| 49 | + <map is="web-map" zoom="16" lat="45.399627" lon="-75.706143" width="400" height="300" controls projection="CBMTILE"> |
| 50 | + <layer- label="cbmt_en" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked HIDDEN></layer-> |
| 51 | + <layer- label="Point" > |
| 52 | + <title>test point</title> |
| 53 | + <!-- in HTML the meta element is void (no closing tag), and since this is |
| 54 | + being parsed by the HTML parser, we should be able to get away with |
| 55 | + that when including features in "HTML" content --> |
| 56 | + <meta name="zoom" content="min=14,max=18"> |
| 57 | + <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46"> |
| 58 | + <feature><properties><name>Canada Centre for Mapping and Earth Observation</name></properties><geometry><Point><coordinates>-75.705961 45.398511</coordinates></Point></geometry></feature> |
| 59 | + </layer-> |
| 60 | + <layer- label="Line" > |
| 61 | + <title>test line</title> |
| 62 | +<!-- <meta name="zoom" content="min=14,max=18"> |
| 63 | + <meta name="extent" content="xmin=-76,ymin=45,xmax=-73,ymax=46">--> |
| 64 | +<feature class="paved_multiple_lane"><properties><name>Booth Street</name><code>1760011</code><nolanes>2</nolanes><pavstatus>1</pavstatus><r_placenam>City Of Ottawa</r_placenam><l_placenam>City Of Ottawa</l_placenam></properties><geometry><LineString><coordinates>-75.7043047 45.3991258 -75.7054911 45.4010507 -75.7098477 45.4083249 -75.7150564 45.4170017 -75.7156161 45.4179239 -75.7162458 45.4185545 -75.7162458 45.4185545</coordinates></LineString></geometry></feature> |
| 65 | + </layer-> |
| 66 | + <layer- label="Polygon" > |
| 67 | + <title>test polygon</title> |
| 68 | + <meta name="zoom" content="min=14,max=18"> |
| 69 | + <meta name="extent" content="xmin=-75.70522069931032,ymin=45.393552994546624,xmax=-75.69988310337068,ymax=45.39590736566621"/> |
| 70 | + <feature class="_1481312"><properties><accuracy>5</accuracy><code>1481312</code><definition>4</definition><isolated>0</isolated><lakgeodb>ONTARIO GEOGRAPHIC NAMED EXTENT LAYER</lakgeodb><laklang>-1</laklang><laknameen>Dows Lake</laknameen><laknamefr>Dows Lake</laknamefr><laknameid>3c139b39c6ce11d892e2080020a0f4c9</laknameid><permanency>1</permanency><rivlang>0.0</rivlang><theme>HD</theme><valdate>198805</valdate></properties><geometry><Polygon><coordinates>-75.7004373 45.3910771 -75.7009141 45.391092 -75.7013957 45.3911071 -75.7013962 45.3911431 -75.7013484 45.3914135 -75.7013647 45.3916924 -75.7017012 45.3920504 -75.7021009 45.3923449 -75.7022552 45.3924249 -75.7026795 45.3926473 -75.7030646 45.392798 -75.7031677 45.3928693 -75.7035397 45.392993 -75.7036428 45.3930644 -75.7038225 45.3931352 -75.7038613 45.393171 -75.7038889 45.3933329 -75.7039081 45.393366 -75.7039411 45.3934225 -75.7038435 45.3937922 -75.7037934 45.3938735 -75.7037427 45.3939099 -75.703679 45.3939193 -75.7036022 45.3939107 -75.703307 45.3937956 -75.7027689 45.3936729 -75.7025642 45.3936472 -75.7025003 45.3936476 -75.7024494 45.3936659 -75.7024116 45.3937112 -75.7024255 45.3938011 -75.7024645 45.3938549 -75.7027218 45.3939973 -75.7028124 45.3940957 -75.7031088 45.3943009 -75.7034942 45.3944695 -75.7036618 45.3945945 -75.7036876 45.3946123 -75.7038943 45.3948001 -75.7039713 45.3948266 -75.7041248 45.3948436 -75.7043172 45.3949054 -75.704381 45.394896 -75.7044317 45.3948687 -75.7044957 45.3948773 -75.7045728 45.3949128 -75.7047796 45.3951006 -75.704921 45.3951717 -75.7050113 45.3952431 -75.7050374 45.395288 -75.7052303 45.3953858 -75.7053726 45.3955289 -75.7054627 45.3955824 -75.7056823 45.395779 -75.7056961 45.39586 -75.7058502 45.395922 -75.7058763 45.3959668 -75.7059536 45.3960204 -75.7059674 45.3961013 -75.7058916 45.3961738 -75.7058022 45.3961743 -75.7055454 45.3960679 -75.7054306 45.3960867 -75.7052292 45.396331 -75.7052564 45.3964568 -75.7055005 45.3965723 -75.7055268 45.3966262 -75.7056423 45.3966704 -75.7057188 45.396661 -75.7057818 45.3965885 -75.7057684 45.3965346 -75.7059826 45.3962992 -75.7059692 45.3962453 -75.7060321 45.3961729 -75.7061469 45.3961542 -75.7063395 45.396234 -75.70638 45.3964048 -75.7054853 45.3974006 -75.7053331 45.3974915 -75.7051679 45.3975646 -75.7049769 45.3976108 -75.7047726 45.3976211 -75.704765 45.3976206 -75.7046447 45.3976129 -75.7046317 45.3975949 -75.7045421 45.3975775 -75.7044273 45.3975962 -75.7044018 45.3975964 -75.7043374 45.3975608 -75.7042854 45.3974891 -75.7038487 45.3973028 -75.7036813 45.3971958 -75.7033225 45.397108 -75.7029632 45.3969843 -75.7023094 45.3967993 -75.7017835 45.3966316 -75.701693 45.3965511 -75.7014103 45.3964179 -75.7010758 45.3962309 -75.7006887 45.3959183 -75.7005848 45.3957839 -75.7004557 45.3956677 -75.7002626 45.3955519 -75.6998627 45.3952393 -75.6995528 45.3949712 -75.6993328 45.3947475 -75.6992298 45.3946851 -75.6990886 45.394632 -75.6988679 45.3944852 -75.6987666 45.3944179 -75.6984065 45.3942221 -75.697983 45.3940717 -75.6975088 45.3939486 -75.6973425 45.3939316 -75.6971763 45.3939236 -75.6970359 45.3939334 -75.6969467 45.393952 -75.6969125 45.3938768 -75.6968285 45.3936917 -75.6969299 45.393628 -75.697209 45.3934643 -75.6973865 45.3933552 -75.6983865 45.392602 -75.6996907 45.3916579 -75.7004377 45.3911131 -75.7004373 45.3910771</coordinates><coordinates>-75.7043714 45.3951571 -75.7043974 45.395193 -75.7044615 45.3952106 -75.7045003 45.3952463 -75.7045389 45.3952641 -75.7046027 45.3952637 -75.7046677 45.3953533 -75.7047317 45.3953619 -75.7047955 45.3953525 -75.7048077 45.3953075 -75.7047303 45.3952449 -75.7046662 45.3952273 -75.7045632 45.3951649 -75.7043714 45.3951571</coordinates></Polygon></geometry></feature> |
| 71 | + </layer-> |
| 72 | + </map> |
| 73 | + </body> |
| 74 | +</html> |
0 commit comments