CSSScript.com Demo Page
Download Back To CSSScript.Com
Search for places, shape a map boundary, seed a fixed pin, and inspect the component state as it changes.
01 / Search
Start with a plain field, then add a map when the interaction needs a physical point.
No map
Type a place name or seed a known location.
<wc-location-field
label="From"
placeholder="Try Paddington Station"
></wc-location-field>Map enabled
<wc-location-field
label="Meeting point"
show-map
center-lat="51.505"
center-lng="-0.09"
></wc-location-field>02 / Boundaries
Bias the search, draw a GeoJSON outline, or tune a radius without changing the component.
Search bias
52.2053, 0.1218
<wc-location-field
label="Destination"
show-map
center-lat="52.2053"
center-lng="0.1218"
></wc-location-field>GeoJSON property
const field = document.querySelector('#demo-geojson');
field.geojson = {
type: 'Polygon',
coordinates: [ /* boundary */ ]
};Radius overlay
<wc-location-field
show-map
center-lat="52.2053"
center-lng="0.1218"
radius-km="2.5"
></wc-location-field>Readonly mode
const map = document.querySelector('#demo-readonly');
map.prefill({
address: 'Buckingham Palace',
lat: 51.5014,
lng: -0.1419
});03 / API and events
Use the public methods and watch the bubbling location-change event write its payload below.
Public methods
address: waiting for a value lat: null lng: null
const field = document.querySelector('#demo-api');
field.prefill({ address, lat, lng });
field.clear();
console.log(field.value, field.lat, field.lng);CustomEvent
Interact with the field above to receive an event.
field.addEventListener('location-change', event => {
const { lat, lng, address, w3w } = event.detail;
});