multiple osm maps possible

This commit is contained in:
surrim 2020-02-27 01:32:55 +01:00
parent cca07b792b
commit e9481ba15d
2 changed files with 134 additions and 131 deletions

View file

@ -46,20 +46,20 @@
function event_hook($event, &$bag, &$eventData, $addData = null) function event_hook($event, &$bag, &$eventData, $addData = null)
{ {
if ($event == 'entries_header') { if ($event == 'entries_header') {
if (in_array($this->get_config('category_id'), $this->get_page_categories())) { if ($this->get_config('category_id') === '0' || in_array($this->get_config('category_id'), $this->get_page_categories())) {
echo ' <div id="map" data-category="'.$this->get_config('category_id', '').'" data-path="'.$this->get_config('path', '').'" data-latitude="'.$this->get_config('latitude', 51.48165).'" data-longitude="'.$this->get_config('longitude', 7.21648).'" data-zoom="'.$this->get_config('zoom', 15).'" style="height: '.$this->get_config('height', '463px').'"></div>'.PHP_EOL; echo ' <div class="map" data-category="'.$this->get_config('category_id', '').'" data-path="'.$this->get_config('path', '').'" data-latitude="'.$this->get_config('latitude', 51.48165).'" data-longitude="'.$this->get_config('longitude', 7.21648).'" data-zoom="'.$this->get_config('zoom', 15).'" style="height: '.$this->get_config('height', '463px').'"></div>'.PHP_EOL;
echo ' <div id="popup" class="ol-popup"></div>'.PHP_EOL;
} }
} }
} }
function get_selectable_categories() function get_selectable_categories()
{ {
$res = serendipity_fetchCategories(); $categories = array(0 => ALL_CATEGORIES);
$categories[0] = NO_CATEGORY; $cats = serendipity_fetchCategories();
if (is_array($categories)) { if (is_array($cats)) {
foreach ($res as $category) { $cats = serendipity_walkRecursive($cats, 'categoryid', 'parentid', VIEWMODE_THREADED);
$categories[$category['categoryid']] = $category['category_name']; foreach($cats as $cat) {
$categories[$cat['categoryid']] = str_repeat('   ', $cat['depth']) . $cat['category_name'];
} }
} }
return $categories; return $categories;
@ -79,7 +79,7 @@
$propbag->add('name', PLUGIN_EVENT_OSM_CATEGORY); $propbag->add('name', PLUGIN_EVENT_OSM_CATEGORY);
$propbag->add('description', PLUGIN_EVENT_OSM_CATEGORY_DESCRIPTION); $propbag->add('description', PLUGIN_EVENT_OSM_CATEGORY_DESCRIPTION);
$propbag->add('select_values', $this->get_selectable_categories()); $propbag->add('select_values', $this->get_selectable_categories());
$propbag->add('default', ''); $propbag->add('default', '0');
break; break;
case 'path': case 'path':
$propbag->add('type', 'string'); $propbag->add('type', 'string');

View file

@ -5,7 +5,9 @@ const dateToColor = date => {
}; };
window.onload = () => { window.onload = () => {
const popup = document.getElementById("popup"); document.querySelectorAll("div.map").forEach(divMap => {
const popup = document.createElement("div");
popup.setAttribute("class", "ol-popup");
popup.onclick = () => { popup.onclick = () => {
overlay.setPosition(undefined); overlay.setPosition(undefined);
}; };
@ -14,8 +16,8 @@ window.onload = () => {
element: popup element: popup
}); });
const data = document.getElementById("map").dataset; const data = divMap.dataset;
const entries = geo.entries.filter(x => x.categories.includes(data.category)); const entries = geo.entries.filter(x => data.category === "0" || x.categories.includes(data.category));
const uploads = geo.uploads.filter(x => x.url.startsWith(data.path)); const uploads = geo.uploads.filter(x => x.url.startsWith(data.path));
const features = entries.map((entry, id) => { const features = entries.map((entry, id) => {
const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(entry.pos.reverse()))); const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(entry.pos.reverse())));
@ -78,7 +80,7 @@ window.onload = () => {
}), }),
layers: layers, layers: layers,
overlays: [overlay], overlays: [overlay],
target: "map", target: divMap,
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([data.longitude, data.latitude]), center: ol.proj.fromLonLat([data.longitude, data.latitude]),
zoom: data.zoom zoom: data.zoom
@ -119,7 +121,7 @@ window.onload = () => {
}; };
const ulEntries = foundEntries.map(x => makeItem(entries[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Blogs")); const ulEntries = foundEntries.map(x => makeItem(entries[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Blogs"));
const ulUploads = foundUploads.map(x => makeItem(uploads[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Downloads")); const ulUploads = foundUploads.map(x => makeItem(uploads[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Downloads"));
popup.innerHTML = (foundEntries.length ? ulEntries.outerHTML : '') + (foundUploads.length ? ulUploads.outerHTML : ''); popup.innerHTML = (foundEntries.length ? ulEntries.outerHTML : "") + (foundUploads.length ? ulUploads.outerHTML : "");
overlay.setPosition(foundEntries.length ? ol.proj.fromLonLat( overlay.setPosition(foundEntries.length ? ol.proj.fromLonLat(
[0, 1].map(latLon => foundEntries.map(x => entries[x].pos[latLon]).reduce((x, y) => x + y, 0) / foundEntries.length) [0, 1].map(latLon => foundEntries.map(x => entries[x].pos[latLon]).reduce((x, y) => x + y, 0) / foundEntries.length)
) : event.coordinate); ) : event.coordinate);
@ -130,7 +132,8 @@ window.onload = () => {
map.on("pointermove", event => { map.on("pointermove", event => {
const pixel = map.getEventPixel(event.originalEvent); const pixel = map.getEventPixel(event.originalEvent);
const hit = map.hasFeatureAtPixel(pixel, {hitTolerance: 10}); const hit = map.hasFeatureAtPixel(pixel, {hitTolerance: 10});
document.getElementById(map.getTarget()).style.cursor = hit ? "pointer" : ""; divMap.style.cursor = hit ? "pointer" : "";
});
}); });
}; };