multiple osm maps possible
This commit is contained in:
parent
cca07b792b
commit
e9481ba15d
2 changed files with 134 additions and 131 deletions
|
@ -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');
|
||||||
|
|
|
@ -5,132 +5,135 @@ const dateToColor = date => {
|
||||||
};
|
};
|
||||||
|
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
const popup = document.getElementById("popup");
|
document.querySelectorAll("div.map").forEach(divMap => {
|
||||||
popup.onclick = () => {
|
const popup = document.createElement("div");
|
||||||
overlay.setPosition(undefined);
|
popup.setAttribute("class", "ol-popup");
|
||||||
};
|
popup.onclick = () => {
|
||||||
|
overlay.setPosition(undefined);
|
||||||
const overlay = new ol.Overlay({
|
|
||||||
element: popup
|
|
||||||
});
|
|
||||||
|
|
||||||
const data = document.getElementById("map").dataset;
|
|
||||||
const entries = geo.entries.filter(x => x.categories.includes(data.category));
|
|
||||||
const uploads = geo.uploads.filter(x => x.url.startsWith(data.path));
|
|
||||||
const features = entries.map((entry, id) => {
|
|
||||||
const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(entry.pos.reverse())));
|
|
||||||
feature.setId(id);
|
|
||||||
return feature;
|
|
||||||
});
|
|
||||||
|
|
||||||
const osmSource = new ol.source.OSM();
|
|
||||||
const layers = [
|
|
||||||
new ol.layer.Tile({source: osmSource}),
|
|
||||||
new ol.layer.Vector({
|
|
||||||
source: new ol.source.Vector({features: features}),
|
|
||||||
style: feature => {
|
|
||||||
const id = feature.getId();
|
|
||||||
const entry = entries[id];
|
|
||||||
const date = new Date(entry.date * 1000);
|
|
||||||
|
|
||||||
return new ol.style.Style({
|
|
||||||
image: new ol.style.Circle({
|
|
||||||
radius: 6,
|
|
||||||
fill: new ol.style.Fill({color: dateToColor(date)})
|
|
||||||
})
|
|
||||||
});
|
|
||||||
},
|
|
||||||
zIndex: Infinity
|
|
||||||
})
|
|
||||||
];
|
|
||||||
for (const upload of uploads) {
|
|
||||||
const layer = new ol.layer.Vector({
|
|
||||||
source: new ol.source.Vector({
|
|
||||||
url: upload.url,
|
|
||||||
format: new ol.format.GPX()
|
|
||||||
}),
|
|
||||||
style: new ol.style.Style({
|
|
||||||
stroke: new ol.style.Stroke({
|
|
||||||
color: dateToColor(new Date(upload.date * 1000)),
|
|
||||||
width: 3,
|
|
||||||
lineDash: upload.date * 1000 > Date.now() ? [3, 6] : undefined
|
|
||||||
})
|
|
||||||
})
|
|
||||||
});
|
|
||||||
layers.push(layer);
|
|
||||||
}
|
|
||||||
const map = new ol.Map({
|
|
||||||
controls: ol.control.defaults({rotate: false}).extend([
|
|
||||||
new ol.control.FullScreen(),
|
|
||||||
new ol.control.OverviewMap({
|
|
||||||
layers: [
|
|
||||||
new ol.layer.Tile({source: osmSource})
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
new ol.control.ScaleLine({
|
|
||||||
bar: true,
|
|
||||||
minWidth: 120
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
interactions: ol.interaction.defaults({
|
|
||||||
altShiftDragRotate: false,
|
|
||||||
pinchRotate: false
|
|
||||||
}),
|
|
||||||
layers: layers,
|
|
||||||
overlays: [overlay],
|
|
||||||
target: "map",
|
|
||||||
view: new ol.View({
|
|
||||||
center: ol.proj.fromLonLat([data.longitude, data.latitude]),
|
|
||||||
zoom: data.zoom
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
map.on("singleclick", event => {
|
|
||||||
const makeItem = object => {
|
|
||||||
const a = document.createElement("a");
|
|
||||||
a.appendChild(document.createTextNode(object.title));
|
|
||||||
a.setAttribute("href", object.url);
|
|
||||||
a.setAttribute("title", (object.author !== undefined ? object.author + ", " : "") + new Date(object.date * 1000).toLocaleString(undefined, {year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit"}));
|
|
||||||
const li = document.createElement("li");
|
|
||||||
li.appendChild(a);
|
|
||||||
return li;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const foundEntries = [];
|
const overlay = new ol.Overlay({
|
||||||
const foundUploads = [];
|
element: popup
|
||||||
map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
|
});
|
||||||
const id = feature.getId();
|
|
||||||
if (id !== undefined) {
|
|
||||||
foundEntries.push(id);
|
|
||||||
} else {
|
|
||||||
const url = layer.getSource().getUrl();
|
|
||||||
const id = uploads.findIndex(upload => upload.url === url);
|
|
||||||
foundUploads.push(id);
|
|
||||||
}
|
|
||||||
}, {hitTolerance: 10});
|
|
||||||
foundEntries.sort((x, y) => x - y);
|
|
||||||
foundUploads.sort((x, y) => x - y);
|
|
||||||
|
|
||||||
if (foundEntries.length || foundUploads.length) {
|
const data = divMap.dataset;
|
||||||
const initUl = title => {
|
const entries = geo.entries.filter(x => data.category === "0" || x.categories.includes(data.category));
|
||||||
const ul = document.createElement("ul");
|
const uploads = geo.uploads.filter(x => x.url.startsWith(data.path));
|
||||||
ul.setAttribute("data-title", title);
|
const features = entries.map((entry, id) => {
|
||||||
return ul;
|
const feature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(entry.pos.reverse())));
|
||||||
};
|
feature.setId(id);
|
||||||
const ulEntries = foundEntries.map(x => makeItem(entries[x])).reduce((x, y) => {x.appendChild(y); return x;}, initUl("Blogs"));
|
return feature;
|
||||||
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 : '');
|
|
||||||
overlay.setPosition(foundEntries.length ? ol.proj.fromLonLat(
|
const osmSource = new ol.source.OSM();
|
||||||
[0, 1].map(latLon => foundEntries.map(x => entries[x].pos[latLon]).reduce((x, y) => x + y, 0) / foundEntries.length)
|
const layers = [
|
||||||
) : event.coordinate);
|
new ol.layer.Tile({source: osmSource}),
|
||||||
} else {
|
new ol.layer.Vector({
|
||||||
overlay.setPosition(undefined);
|
source: new ol.source.Vector({features: features}),
|
||||||
|
style: feature => {
|
||||||
|
const id = feature.getId();
|
||||||
|
const entry = entries[id];
|
||||||
|
const date = new Date(entry.date * 1000);
|
||||||
|
|
||||||
|
return new ol.style.Style({
|
||||||
|
image: new ol.style.Circle({
|
||||||
|
radius: 6,
|
||||||
|
fill: new ol.style.Fill({color: dateToColor(date)})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
},
|
||||||
|
zIndex: Infinity
|
||||||
|
})
|
||||||
|
];
|
||||||
|
for (const upload of uploads) {
|
||||||
|
const layer = new ol.layer.Vector({
|
||||||
|
source: new ol.source.Vector({
|
||||||
|
url: upload.url,
|
||||||
|
format: new ol.format.GPX()
|
||||||
|
}),
|
||||||
|
style: new ol.style.Style({
|
||||||
|
stroke: new ol.style.Stroke({
|
||||||
|
color: dateToColor(new Date(upload.date * 1000)),
|
||||||
|
width: 3,
|
||||||
|
lineDash: upload.date * 1000 > Date.now() ? [3, 6] : undefined
|
||||||
|
})
|
||||||
|
})
|
||||||
|
});
|
||||||
|
layers.push(layer);
|
||||||
}
|
}
|
||||||
});
|
const map = new ol.Map({
|
||||||
map.on("pointermove", event => {
|
controls: ol.control.defaults({rotate: false}).extend([
|
||||||
const pixel = map.getEventPixel(event.originalEvent);
|
new ol.control.FullScreen(),
|
||||||
const hit = map.hasFeatureAtPixel(pixel, {hitTolerance: 10});
|
new ol.control.OverviewMap({
|
||||||
document.getElementById(map.getTarget()).style.cursor = hit ? "pointer" : "";
|
layers: [
|
||||||
|
new ol.layer.Tile({source: osmSource})
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
new ol.control.ScaleLine({
|
||||||
|
bar: true,
|
||||||
|
minWidth: 120
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
interactions: ol.interaction.defaults({
|
||||||
|
altShiftDragRotate: false,
|
||||||
|
pinchRotate: false
|
||||||
|
}),
|
||||||
|
layers: layers,
|
||||||
|
overlays: [overlay],
|
||||||
|
target: divMap,
|
||||||
|
view: new ol.View({
|
||||||
|
center: ol.proj.fromLonLat([data.longitude, data.latitude]),
|
||||||
|
zoom: data.zoom
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
map.on("singleclick", event => {
|
||||||
|
const makeItem = object => {
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.appendChild(document.createTextNode(object.title));
|
||||||
|
a.setAttribute("href", object.url);
|
||||||
|
a.setAttribute("title", (object.author !== undefined ? object.author + ", " : "") + new Date(object.date * 1000).toLocaleString(undefined, {year: "numeric", month: "long", day: "2-digit", hour: "2-digit", minute: "2-digit"}));
|
||||||
|
const li = document.createElement("li");
|
||||||
|
li.appendChild(a);
|
||||||
|
return li;
|
||||||
|
};
|
||||||
|
|
||||||
|
const foundEntries = [];
|
||||||
|
const foundUploads = [];
|
||||||
|
map.forEachFeatureAtPixel(event.pixel, (feature, layer) => {
|
||||||
|
const id = feature.getId();
|
||||||
|
if (id !== undefined) {
|
||||||
|
foundEntries.push(id);
|
||||||
|
} else {
|
||||||
|
const url = layer.getSource().getUrl();
|
||||||
|
const id = uploads.findIndex(upload => upload.url === url);
|
||||||
|
foundUploads.push(id);
|
||||||
|
}
|
||||||
|
}, {hitTolerance: 10});
|
||||||
|
foundEntries.sort((x, y) => x - y);
|
||||||
|
foundUploads.sort((x, y) => x - y);
|
||||||
|
|
||||||
|
if (foundEntries.length || foundUploads.length) {
|
||||||
|
const initUl = title => {
|
||||||
|
const ul = document.createElement("ul");
|
||||||
|
ul.setAttribute("data-title", title);
|
||||||
|
return ul;
|
||||||
|
};
|
||||||
|
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"));
|
||||||
|
popup.innerHTML = (foundEntries.length ? ulEntries.outerHTML : "") + (foundUploads.length ? ulUploads.outerHTML : "");
|
||||||
|
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)
|
||||||
|
) : event.coordinate);
|
||||||
|
} else {
|
||||||
|
overlay.setPosition(undefined);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
map.on("pointermove", event => {
|
||||||
|
const pixel = map.getEventPixel(event.originalEvent);
|
||||||
|
const hit = map.hasFeatureAtPixel(pixel, {hitTolerance: 10});
|
||||||
|
divMap.style.cursor = hit ? "pointer" : "";
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue