Skip to content

Commit 81bf561

Browse files
committed
map : better geojson point support
1 parent 8fafba6 commit 81bf561

File tree

4 files changed

+48
-14
lines changed

4 files changed

+48
-14
lines changed

CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# CHANGELOG.md
22

3+
## 0.15.2 (unreleased)
4+
5+
- Fix a bug where the new geojson support in the map component would not work when the geojson was passed as a string. This impacted databases that do not support native json objects, such as SQLite.
6+
- Improve support for geojson points (in addition to polygons and lines) in the map component.
7+
- Add a new `size` parameter to the map component to set the size of markers.
8+
39
## 0.15.1 (2023-11-07)
410

511
- Many improvements in the [`form`](https://sql.ophir.dev/documentation.sql?component=form#component) component

examples/official-site/sqlpage/migrations/10_map.sql

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,15 @@ VALUES (
4141
(
4242
'map',
4343
'latitude',
44-
'Latitude of the marker. Required if geojson is not set.',
44+
'Latitude of the marker. Required only if geojson is not set.',
4545
'REAL',
4646
FALSE,
4747
FALSE
4848
),
4949
(
5050
'map',
5151
'longitude',
52-
'Longitude of the marker. Required if geojson is not set.',
52+
'Longitude of the marker. Required only if geojson is not set.',
5353
'REAL',
5454
FALSE,
5555
FALSE
@@ -105,10 +105,18 @@ VALUES (
105105
(
106106
'map',
107107
'geojson',
108-
'A GeoJSON geometry (line, a polygon, ...) to display on the map. Can be styled using geojson properties using the name of leaflet path options.',
108+
'A GeoJSON geometry (line, polygon, ...) to display on the map. Can be styled using geojson properties using the name of leaflet path options. Introduced in 0.15.1. Accepts raw strings in addition to JSON objects since 0.15.2.',
109109
'JSON',
110110
FALSE,
111111
TRUE
112+
),
113+
(
114+
'map',
115+
'size',
116+
'Size of the marker icon. Requires "icon" to be set.',
117+
'INTEGER',
118+
FALSE,
119+
TRUE
112120
)
113121
;
114122
-- Insert an example usage of the map component into the example table
@@ -117,7 +125,18 @@ VALUES (
117125
'map',
118126
'Basic example of a map with a marker',
119127
JSON(
120-
'[{ "component": "map", "zoom": 2 }, { "title": "New Delhi", "latitude": 28.6139, "longitude": 77.2090 }]'
128+
'[{ "component": "map", "zoom": 1 }, { "title": "New Delhi", "latitude": 28.6139, "longitude": 77.2090 }]'
129+
)
130+
),
131+
(
132+
'map',
133+
'Basic marker defined in GeoJSON. Using [leaflet marker options](https://leafletjs.com/reference.html#marker-option) as GeoJSON properties.',
134+
JSON(
135+
'[{ "component": "map", "zoom": 1 },
136+
{ "icon": "peace",
137+
"size": 20,
138+
"link": "https://en.wikipedia.org/wiki/Nelson_Mandela",
139+
"geojson": "{\"type\":\"Feature\", \"properties\": { \"title\":\"Birth Place of Nelson Mandela\" }, \"geometry\": { \"type\":\"Point\", \"coordinates\": [28.49, -31.96] }}"}]'
121140
)
122141
),
123142
(

sqlpage/sqlpage.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,20 @@ function sqlpage_map() {
6262
const marker =
6363
dataset.coords ? createMarker(marker_elem, options)
6464
: createGeoJSONMarker(marker_elem, options);
65-
marker.addTo(map).bindPopup(marker_elem);
65+
marker.addTo(map);
66+
if (options.title) marker.bindPopup(marker_elem);
67+
else if (marker_elem.dataset.link) marker.on('click', () => window.location = marker_elem.dataset.link);
6668
}
6769
function createMarker(marker_elem, options) {
6870
const coords = marker_elem.dataset.coords.split(",").map(c => parseFloat(c));
6971
const icon_obj = marker_elem.getElementsByClassName("mapicon")[0];
7072
if (icon_obj) {
73+
const size = 1.5 * +(options.size || icon_obj.firstChild?.getAttribute('width') || 24);
7174
options.icon = L.divIcon({
7275
html: icon_obj,
73-
className: `border-0 bg-${options.color || 'primary'} bg-gradient text-white rounded-circle p-2 shadow`,
74-
iconSize: [42, 42],
75-
iconAnchor: [21, 21],
76+
className: `border-0 bg-${options.color || 'primary'} bg-gradient text-white rounded-circle shadow d-flex justify-content-center align-items-center`,
77+
iconSize: [size, size],
78+
iconAnchor: [size/2, size/2],
7679
});
7780
}
7881
return L.marker(coords, options);
@@ -86,7 +89,11 @@ function sqlpage_map() {
8689
if (typeof properties !== "object") return options;
8790
return {...options, ...properties};
8891
}
89-
return L.geoJSON(geojson, { style });
92+
function pointToLayer(feature, latlng) {
93+
marker_elem.dataset.coords = latlng.lat + "," + latlng.lng;
94+
return createMarker(marker_elem, { ...options, ...feature.properties });
95+
}
96+
return L.geoJSON(geojson, { style, pointToLayer });
9097
}
9198
}
9299

sqlpage/templates/map.handlebars

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,19 @@
1818
<div class="d-none" hidden>
1919
{{~#each_row~}}
2020
<div class="marker"
21-
{{#if latitude}}data-coords="{{latitude}},{{longitude}}"{{/if}}
22-
{{#if color}}data-color="{{color}}"{{/if}}
23-
{{#if geojson}}data-geojson="
21+
{{~#if latitude}} data-coords="{{latitude}},{{longitude}}"{{/if}}
22+
{{~#if color}} data-color="{{color}}"{{/if}}
23+
{{~#if size}} data-size="{{size}}"{{/if}}
24+
{{~#if link}} data-link="{{link}}"{{/if}}
25+
{{~#if geojson}} data-geojson="
2426
{{~#if (eq (typeof geojson) 'string')}}{{geojson}}
2527
{{~else~}}{{stringify geojson}}
2628
{{~/if~}}
27-
"{{/if}}
29+
"{{/if~}}
2830
>
2931
<h3>
3032
{{~#if icon~}}
31-
<span class="mapicon">{{~icon_img icon~}}</span>
33+
<span class="mapicon">{{~icon_img icon size~}}</span>
3234
{{~/if~}}
3335
{{~#if link~}}
3436
<a href="{{link}}">{{title}}</a>

0 commit comments

Comments
 (0)