From b94fa7dd50512728101181c2457a6892883eb54b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment?= <cpartiot@gmail.com>
Date: Fri, 24 Jul 2020 15:25:49 +0200
Subject: [PATCH] update: solid-map show popup on mouse over
---
examples/data/map/events.jsonld | 3 ++
examples/filtered-map.html | 4 +-
examples/solid-map.html | 15 +++++++
src/components/solid-map.ts | 78 ++++++++++++++++++++++-----------
4 files changed, 73 insertions(+), 27 deletions(-)
diff --git a/examples/data/map/events.jsonld b/examples/data/map/events.jsonld
index e385c943..647ff59d 100644
--- a/examples/data/map/events.jsonld
+++ b/examples/data/map/events.jsonld
@@ -6,6 +6,7 @@
"category": "showcase event",
"lat": "21.028511",
"lng": "105.804817",
+ "Youpi": true,
"permissions": [],
"@id": "event-1.jsonld"
},
@@ -14,6 +15,7 @@
"category": "meetup",
"lat": "48.864716",
"lng": "2.349014",
+ "Youpi": true,
"permissions": [],
"@id": "event-2.jsonld"
},
@@ -22,6 +24,7 @@
"category": "showcase event",
"lat": "41.8902102",
"lng": "12.4922309",
+ "Youpi": false,
"permissions": [],
"@id": "event-3.jsonld"
}
diff --git a/examples/filtered-map.html b/examples/filtered-map.html
index ccf6caf8..976d8c7a 100644
--- a/examples/filtered-map.html
+++ b/examples/filtered-map.html
@@ -20,8 +20,10 @@
<h2>Filtered Solid Map</h2>
<solid-form-search
id="filter"
- fields="name"
+ fields="name, Youpi"
label-name='Filter places (try "Europe")'
+ label-Youpi='youpi ?'
+ widget-Youpi='solid-form-checkbox'
></solid-form-search>
<solid-map
data-src="data/map/events.jsonld"
diff --git a/examples/solid-map.html b/examples/solid-map.html
index a04d732f..651b4a18 100644
--- a/examples/solid-map.html
+++ b/examples/solid-map.html
@@ -7,6 +7,7 @@
<title>SIB test: solid-map</title>
<script type="module" src="../dist/index.js"></script>
<script type="module" src="../dist/components/solid-map.js"></script>
+ <script type="module" src="https://unpkg.com/@startinblox/router@0.8"></script>
<script>
document.addEventListener("DOMContentLoaded", event => {
document.querySelector("solid-map").addEventListener("resourceSelect", event => console.log(event.detail.resource));
@@ -17,14 +18,28 @@
</head>
<body>
+
+ <solid-router default-route="details-marker-map" keep-url>
+ <solid-route name="details-marker-map"></solid-route>
+ </solid-router>
+
<h2>Solid Map</h2>
<solid-map
data-src="data/map/events.jsonld"
fields="infos(name, category)"
group-by="category"
style="display: block; width: 800px; height: 600px;"
+ next="details-marker-map"
></solid-map>
+
+ <div hidden id="details-marker-map">
+ <solid-display id="details-marker-map"
+ bind-resources
+ fields="name"
+ ></solid-display>
+ </div>
+
<style>
.group-meetup {
border-color: coral;
diff --git a/src/components/solid-map.ts b/src/components/solid-map.ts
index e987c2d4..0502d2c3 100644
--- a/src/components/solid-map.ts
+++ b/src/components/solid-map.ts
@@ -23,10 +23,10 @@ export const SolidMap = {
],
initialState: {
markers: {
- default: null
+ default: null,
},
subscriptions: null,
- resetPlanned: false
+ resetPlanned: false,
},
created(): void {
importCSS('https://unpkg.com/leaflet@1.3.1/dist/leaflet.css');
@@ -40,7 +40,7 @@ export const SolidMap = {
div.style.height = '100%';
this.map = L.map(div);
L.tileLayer(
- 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}'
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
).addTo(this.map);
this.element.appendChild(div);
},
@@ -62,21 +62,21 @@ export const SolidMap = {
setTimeout(() => {
this.reset();
this.resetPlanned = false;
- })
+ });
}
},
dispatchSelect(event: CustomEvent): void {
const target = event.target as Element;
const resource = target['options'].resource;
this.element.dispatchEvent(
- new CustomEvent('resourceSelect', { detail: { resource: resource } })
+ new CustomEvent('resourceSelect', { detail: { resource: resource } }),
);
if (this.next) {
this.element.dispatchEvent(
new CustomEvent('requestNavigation', {
bubbles: true,
- detail: { route: this.next, resource: resource }
- })
+ detail: { route: this.next, resource: resource },
+ }),
);
}
},
@@ -89,27 +89,43 @@ export const SolidMap = {
async appendChildElt(resourceId: string, groupClass: string) {
const resource = await store.getData(resourceId, this.context);
if (!this.subscriptions.get(resourceId)) {
- this.subscriptions.set(resourceId, PubSub.subscribe(resourceId, () => this.updateDOM()))
+ this.subscriptions.set(
+ resourceId,
+ PubSub.subscribe(resourceId, () => this.updateDOM()),
+ );
}
const lat = await resource['lat'];
const lng = await resource['lng'];
if (lat && lng) {
- const icon = L.divIcon({ // create the icon, doc here: https://leafletjs.com/reference-1.6.0.html#icon
+ const icon = L.divIcon({
+ // create the icon, doc here: https://leafletjs.com/reference-1.6.0.html#icon
className: 'sib-custom-marker ' + groupClass, // default class used for styling
iconSize: [8, 8],
iconAnchor: [12, 34],
- popupAnchor: [0,-34]
+ popupAnchor: [0, -34],
});
-
- const marker = L.marker([lat.toString(), lng.toString()], { // create a marker, doc here: https://leafletjs.com/reference-1.6.0.html#marker
+ const latlng = [lat.toString(), lng.toString()];
+ const marker = L.marker(latlng, {
+ // create a marker, doc here: https://leafletjs.com/reference-1.6.0.html#marker
resource: resource,
- icon: icon
- }).addTo(this.map)
- .on('click', this.dispatchSelect.bind(this));
-
- if (this.fields !== null) { // show popups only if fields attribute
- marker.bindPopup(() => this.getPopupContent(resourceId), { minWidth: 150 }) // re-generate popup sib-display
+ icon: icon,
+ })
+ .addTo(this.map)
+ .on('click', this.dispatchSelect.bind(this))
+ marker
+ .on('mouseover', function () {
+ this.openPopup();
+ })
+ .on('mouseout', function () {
+ this.closePopup();
+ });
+ if (this.fields !== null) {
+ // show popups only if fields attribute
+ marker.bindPopup(() => this.getPopupContent(resourceId), {
+ minWidth: 150,
+ closeButton: false
+ }); // re-generate popup sib-display
}
this.markers.push(marker);
@@ -120,7 +136,8 @@ export const SolidMap = {
* @param resourceId: id of the popup clicked
*/
getPopupContent(resourceId: string) {
- const prefix = this.element.localName.split('-').shift() === 'sib' ? 'sib': 'solid';
+ const prefix =
+ this.element.localName.split('-').shift() === 'sib' ? 'sib' : 'solid';
const child = document.createElement(`${prefix}-display`);
if (this.fields != null) child.setAttribute('fields', this.fields);
@@ -142,7 +159,7 @@ export const SolidMap = {
child.setAttribute(attr.name.replace(/^child-/, ''), attr.value);
}
child.dataset.src = resourceId; // set id after the extra-context is
- return child
+ return child;
},
/**
* Override widgetMixin method: empty the map
@@ -163,7 +180,9 @@ export const SolidMap = {
* @param div: Originally, div to insert content in. Used here to pass informations to the renderDOM method
*/
renderGroup(groupName: string, div: HTMLElement) {
- const sanitizedGroupName = encodeURIComponent(groupName.toLowerCase()).replace(/%[0-9A-F]{2}/gi,'');
+ const sanitizedGroupName = encodeURIComponent(
+ groupName.toLowerCase(),
+ ).replace(/%[0-9A-F]{2}/gi, '');
div.dataset.groupClass = 'group-' + sanitizedGroupName;
return div;
},
@@ -174,14 +193,21 @@ export const SolidMap = {
* @param div
* @param context
*/
- async renderDOM(resources: object[], listPostProcessors: Function[], div: HTMLElement, context: string) {
+ async renderDOM(
+ resources: object[],
+ listPostProcessors: Function[],
+ div: HTMLElement,
+ context: string,
+ ) {
const groupClass = div.dataset.groupClass || ''; // get the group class from the useless div element
- for await (let resource of resources) await this.appendChildElt(resource['@id'], groupClass);
+ for await (let resource of resources)
+ await this.appendChildElt(resource['@id'], groupClass);
this.planReset();
const nextProcessor = listPostProcessors.shift();
- if(nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
- }
+ if (nextProcessor)
+ await nextProcessor(resources, listPostProcessors, div, context);
+ },
};
-Sib.register(SolidMap);
\ No newline at end of file
+Sib.register(SolidMap);
--
GitLab