Add restaurants.mapml, svg-marker-testing.html (#326)

* Add demo/restaurants.mapml to support screen reader user testing * Add experiment on svg markers to potentially render MapML points instead of Leaflet markers.
Maps4HTML · Mar 1, 2021 · 3fbfc6d · 3fbfc6d
1 parent 6cc9a64
commit 3fbfc6d
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/demo/svg-marker-testing.html b/demo/svg-marker-testing.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!--
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+-->
+<html>
+  <head>
+    <title>TODO supply a title</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      path:focus {
+       outline-color:  red;
+      }
+      div {
+        background-color: pink;
+        border: 1px solid black;
+
+        }
+    </style>
+  </head>
+  <body>
+    <div>
+    <svg viewBox="0 0 120 120"  xmlns="http://www.w3.org/2000/svg">
+  <defs> 
+    <marker id="placemark" viewBox="0 0 4000 4000">
+      <path d="m1075.939941,1959.629028c-38.765869,-190.301025 -107.115906,-348.665039 -189.902954,-495.439941c-61.406982,-108.87207 -132.543945,-209.363037 -198.364014,-314.937988c-21.971985,-35.244019 -40.93396,-72.477051 -62.046997,-109.054077c-42.215942,-73.136963 -76.44397,-157.934998 -74.268982,-267.932007c2.125,-107.472961 33.208008,-193.68396 78.029968,-264.171997c73.719055,-115.934967 197.20105,-210.988983 362.884033,-235.968994c135.466064,-20.423981 262.475098,14.082031 352.542969,66.748016c73.600098,43.037994 130.596069,100.527008 173.920044,168.279999c45.219971,70.716003 76.359009,154.26001 78.970947,263.231995c1.337036,55.830017 -7.804932,107.531982 -20.68396,150.417969c-13.033936,43.409058 -33.995972,79.695007 -52.645996,118.454102c-36.406006,75.658936 -82.04895,144.981934 -127.85498,214.345947c-136.437012,206.605957 -264.496094,417.309937 -320.580078,706.026978z" stroke-miterlimit="10" stroke-width="37" stroke="#000000" fill="#007fff" clip-rule="evenodd" fill-rule="evenodd"/>
+      <circle fill="black"  r="183.332031" cy="740.047" cx="1080.546" clip-rule="evenodd" fill-rule="evenodd"/>
+    </marker>
+  </defs>
+  <path d="M 1,5h1Z" marker-start="url(#placemark)" class="one" tabindex="0" >
+    <title>Feature 1</title>
+  </path>
+  <path d="M 27,14h1Z" marker-start="url(#placemark)" class="one" tabindex="0">
+    <title>Feature 2</title>
+  </path>
+</svg></div>
+  </body>
+</html>