This is a sketch of a proposal for a new HTML element to simplify displaying maps on a website. I’d like your comments and criticisms before I submit it.
<div id="map"></div> to my markup.
How about we get rid of all those external libraries as a dependency? Let’s do what we did with
<video> and make mapping a first class element.
It’s quite common to suggest new HTML elements based on popular
<div id="..."> – that’s how we got
<audio>, and the like.
I’d like to propose a new tag:
(In an ideal world, this would use the
<map> element – but that has already been taken by image maps. It could equally be called
<maps>, or similar.)
- As a user of a website, I want embedded maps on a website to offer a fast and consistent experience.
- As a user, I don’t want to share my location with a website.
- As a user, I want access to my devices’ mapping features when I view a map on the web.
- As a developer of a website, I want to take advantage of any in-built mapping software the user has, rather than use a 3rd party library.
This is a sketch of how a
<geo> element could be used. This doesn’t cover all use cases, it misses out important things, it glosses over problems. This is a prototype for others to critique.
Display a map centred on a specific location
Visit our restaurant! <geo location="51.75026,-1.248338"> Your browser doesn't support interactive maps. <img src="... </geo>
Fairly simple. A block element which takes a
location. It includes a fallback experience – just like the
If the user has a mapping app installed on their device, that will be used to provide the map. That will give the user access to all the mapping features they regularly use (favourite places, routing, preferred map styles, street view).
If they don’t have a mapping app installed, the browser can provide that service – or the web developer can specify a fallback solution. Just like HTML5 Video.
location= as taking any data. It is up to the mapping provider to interpret it.
<geo location="Oxford, UK"> Your browser doesn't support interactive maps. <script src="... </geo>
Rather than arbitrary numbers to represent zoom, the
<geo> element uses a
zoom tag which defines how wide the map is in measurable units. For example
zoom="5KM" shows a map with a diameter of 5 kilometres.
zoom="90deg" shows a map zoomed out to show quarter of the world.
<geo location="51.75026,-1.248338" zoom="10KM"> Your browser doesn't support interactive maps. <img src="..." /> </geo>
Possible values could include degrees, kilometres, metres, and metres per pixel.
A website owner may not want a “slippy map” experience – in order to create a map which can’t be moved or zoomed, they can use the boolean attribute
<geo location="51.75026,-1.248338" zoom="10deg" static ></geo>
It is useful to put a selection of markers on a map. For example, the location of the entrance points to a venue.
<geo location="日本武道館" > <marker location="35.69391,139.7494" display="entrance"> <img src="..."> </marker> <marker location="35.69274,139.7501" display="exit"></marker> </geo>
In this case, the markers have a
location tag, with an optional
display tag for textual representation.
They also have an optional child which contains an image to be used as the marker.
In this example, the map shows directions from the user to the destination.
Have a drink with us: <geo location="Strangers' Bar, SW1A 0AA, UK" directions></geo>
A boolean tag. Crucially, the
<geo> element doesn’t share the user’s location with the website.
Complex data (KML and geoJSON)
<geo src="/data/points.json"></geo> <geo src="/data/points.kml"></geo>
Wait! What about….? As I said, this is a basic skeleton description of a new element. It probably doesn’t involve your specific use case.
Just like the
<video> element, this doesn’t stop a developer using a 3rd party solution if they want.