Skip to content

Commit dd0fcf1

Browse files
committed
Fill out the custom control requirement.
Still needs work, particularly conclusion tags.
1 parent d036628 commit dd0fcf1

File tree

1 file changed

+69
-34
lines changed

1 file changed

+69
-34
lines changed

index.html

+69-34
Original file line numberDiff line numberDiff line change
@@ -4503,38 +4503,35 @@ <h5>Conclusion</h5>
45034503
<section id="capability-implement-a-custom-control" data-ucr-role="capability">
45044504
<h4>Implement a custom control</h4>
45054505
<p>
4506-
A custom control is a user interface element that is
4507-
integrated closely with the map's own user interface, and is
4508-
under the control of the map once it has ben added.
4506+
Controls are user interface elements that enable interaction with the map.
4507+
Map implementations typically provide a number of default controls supporting interactions such as zooming
4508+
and switching layers.
4509+
</p>
4510+
<p>
4511+
A map implementation will typically provide the developer with various options for configuring controls.
4512+
This will include such capabilities as adding and removing controls, showing or hiding them,
4513+
and being notified of changes in their state.
4514+
It is also necessary to provide support for controlling the positioning of controls,
4515+
to avoid the situation where two controls occupy the same position on the map's UI.
4516+
</p>
4517+
<p>
4518+
Developers may wish to implement additional controls, either replacing the functionality of the map's default controls,
4519+
or adding new functionality.
4520+
Map implementations should provide APIs to support such custom controls,
4521+
allowing them to integrate fully with the map at a level that is on a par with the map's own controls.
45094522
</p>
45104523
<p class="issue discussion" data-number="57">
45114524
Discuss this section on GitHub.
45124525
</p>
45134526

45144527
<h5>Existing implementations</h5>
45154528
<p>
4516-
A custom control is a JavaScript object or a DOM element
4517-
that satisfies the API's requirements for it to be
4518-
integrated with the map.
4519-
Those requirements vary across APIs.
4520-
Generally, it is expected that a single DOM element
4521-
containing whatever other elements constitute the control UI
4522-
will be provided by the control.
4523-
In some cases the DOM element is passed to the API directly;
4524-
in others, a JavaScript object is passed to the API, which
4525-
is required to implement a method that returns the control's
4526-
containing DOM element.
4527-
Styling of the elements within the control is the
4528-
responsibility of the implementor.
4529-
</p>
4530-
<p>
4531-
Assuming the API requirements are satisfied, the behaviour
4532-
and rendering of the control are then the responsibility of
4533-
the implementation.
4534-
Typically, a custom control will listen to events from the
4535-
DOM, or the map, or both.
4536-
In response to those events, it will then update the state
4537-
of the map, update its own representation, or both.
4529+
Support for controls varies widely among existing map implementations.
4530+
It is generally the developer's responsibility to create a suitable DOM construct,
4531+
styled with CSS and augmented with JavaScript to provide behaviour, for use as a control.
4532+
But though some implementations specify detailed APIs which controls should support
4533+
in order to be properly integrated with the map, others provide minimal support and expect the
4534+
developer to take full responsibility for responding to control lifecycle transitions.
45384535
</p>
45394536
<dl data-ucr-role="implementation-notes">
45404537
<!-- Use dt elements to name the implementation, using the id string to create an auto-link.
@@ -4543,24 +4540,57 @@ <h5>Existing implementations</h5>
45434540
List full implementations first.
45444541
Group implementations (multiple dt for the same dd) when they have the same support.
45454542
-->
4546-
<dt>google-maps-api</dt>
45474543
<dt>mapbox-gl-api</dt>
45484544
<dt>leaflet-api</dt>
45494545
<dt>open-layers-api</dt>
4546+
<dt>tomtom</dt>
45504547
<dd><a>full support</a>:
4551-
These APIs all define requirements for a JavaScript object or DOM element
4552-
to be able to be used as a custom control.
4548+
<p>
4549+
All of these implementations fully support the concept of controls,
4550+
including support for control implementations to be notifed when they are added to or removed from the map,
4551+
so they can update their own internal state acordingly.
4552+
They also allow controls to request their desired positioning within the map's UI,
4553+
and will position controls using sensible defaults if developers choose not to implement that capability.
4554+
</p>
4555+
<p>
4556+
MapBoxGL specifies an interface to which controls are expected to conform.
4557+
The map API provides methods for adding and removing controls to and from the map UI.
4558+
</p>
4559+
<p>
4560+
Leaflet, TomTom (which uses Leaflet), and OpenLayers provide base classes which controls extend,
4561+
along with map methods for adding and removing controls.
4562+
OpenLayers also exposes its control collection directly.
4563+
</p>
4564+
</dd>
4565+
<dt>google-maps-api</dt>
4566+
<dd><a>supported, with limitations</a>:
4567+
<p>
4568+
While Google Maps supports the adding and removing of controls and the specifying of their placement
4569+
within a number of predefined areas within the map's UI,
4570+
there is no specific interface to which they are expected to conform.
4571+
</p>
45534572
</dd>
45544573
<dt>bing-maps-api</dt>
4574+
<dd><a>partial support</a>:
4575+
<p>
4576+
Bing Maps expects controls to be implemented as a type of overlay.
4577+
It provides no particular support for controls beyond that, not even for positioning them within the map UI,
4578+
which is left to the developer to achieve using CSS positioning.
4579+
</p>
45554580
<dt>apple-mapkit-js-api</dt>
4556-
<dd><a>supported, with limitations</a>:
4557-
Items having the form and behaviour of custom controls can
4558-
be implemented in the form of overlays, but there is no facility for
4559-
distinguishing such controls from other overlays.
4581+
<dd><a>no support</a>a>:
4582+
<p>
4583+
Apple MapkitJS does not provide an interface that can be implemented to create a custom control,
4584+
nor does it have any generic mechanism for adding and removing controls beyond those provided.
4585+
</p>
45604586
</dd>
45614587
<dt>d3-geographies-api</dt>
45624588
<dd><a>not applicable</a>:
45634589
<!-- details about what is/isn't supported -->
4590+
<p>
4591+
Although d3 supports a variety of user interactions, the concept of a user interface presenting a collection
4592+
of controls to the user is not part of the library.
4593+
</p>
45644594
</dd>
45654595
</dl>
45664596

@@ -4569,7 +4599,9 @@ <h5>Supported use cases</h5>
45694599

45704600
<h5>Uses beyond mapping</h5>
45714601
<p>
4572-
ToDo
4602+
As controls are explicitly intended as part of the map's user interface,
4603+
further uses for the concept might be found in other cases
4604+
where complex interactive content is presented by an element, such as adding controls to media containers.
45734605
</p>
45744606

45754607
<h5>Related web specifications</h5>
@@ -4585,7 +4617,10 @@ <h5>Conclusion</h5>
45854617
See examples.
45864618
-->
45874619
<p>
4588-
Based on the limited data, we are <a data-ucr-role="conclusion">undecided</a> about whether this should be a requirement.
4620+
It might seem that, as controls are implemented using existing interactive HTML elements,
4621+
there is no pressing need for them to be supported by additional APIS.
4622+
However, the need for them to be closely integrated with a map's own UI, state, and lifecycle
4623+
suggests that this functionality is a <a data-ucr-role="conclusion">requirement</a> for modern web maps.
45894624
</p>
45904625
<ul data-ucr-role="conclusion-notes">
45914626
<!-- bullet-point notes summarizing implementation details / blocking issues.

0 commit comments

Comments
 (0)