Browse Source

gère un peu mieux les nœuds

master
vincent 2 months ago
parent
commit
9a643d7695
4 changed files with 61 additions and 52 deletions
  1. +51
    -44
      assets/controllers/map_controller.js
  2. +8
    -3
      src/Controller/MapController.php
  3. +1
    -1
      src/Controller/ProjectController.php
  4. +1
    -4
      src/Service/GeoJsonManager.php

+ 51
- 44
assets/controllers/map_controller.js View File

@ -51,19 +51,29 @@ export default class extends Controller {
if (geojsons.elements.length > 0) {
// Ajoute chaque forme
geojsons.elements.forEach(function (element) {
element.members.forEach(function (member) {
// TODO On est parti du principe que les features du
// geojson sont toutes des polylines ce qui est un peu
// réducteur, à terme il faudrait distinguer les nœuds,
// des chemins, des polygones, etc.
const polygon = L.polyline(member.geometry.map(function (coord) { return L.latLng(coord.lat, coord.lon)}), {
color: '#0dcaf0', // bleu info bootstrap
weight: 6, // l’idée c’est que ce soit plus gros (par défaut c’est 3) que le tracé des données des tâches parce que ce sera en dessous
opacity: 0.8,
// Cas d’un nœud
if (element.type === 'node') {
L.marker([ element.lat, element.lon ], {
icon: icons['info'],
}).addTo(overpassLayer).bindPopup(L.popup({
overpassElement: element, // on transmet les données du geojson à la popup par là
}).setContent('…')); // le contenu définitif de la popup sera chargé plus tard en ajax
});
}
// Cas d’autre chose qu’un nœud, sans distinction
if (element.members) {
element.members.forEach(function (member) {
// TODO On est parti du principe que les features du
// geojson sont toutes des polylines ce qui est un peu
// réducteur, à terme il faudrait distinguer les géométries
const polygon = L.polyline(member.geometry.map(function (coord) { return L.latLng(coord.lat, coord.lon)}), {
color: '#0dcaf0', // bleu info bootstrap
weight: 6, // l’idée c’est que ce soit plus gros (par défaut c’est 3) que le tracé des données des tâches parce que ce sera en dessous
opacity: 0.8,
}).addTo(overpassLayer).bindPopup(L.popup({
overpassElement: element, // on transmet les données du geojson à la popup par là
}).setContent('…')); // le contenu définitif de la popup sera chargé plus tard en ajax
});
}
});
// Intervient lors de l’ouverture de la popup associée à la forme
overpassLayer.on('popupopen', function (event) {
@ -96,42 +106,39 @@ export default class extends Controller {
geojsons = JSON.parse(this.geojsonValue);
if (geojsons.length > 0) {
geojsons.forEach(function (geojson) {
// TODO Ici aussi on ne distingue pas les géométries des
// features mais ça vaudrait peut-être le coup de s’adapter un
// peu à la situation en cas de nœud, chemin ou zone…
// Par facilité on conserve les propriétés de la première feature pour plus tard
const feature0 = geojson.features[0].properties;
// Dessine la forme de la tâche avec la proprieté `name` qui
// s’ffiche au survol et cliquable vers l’adresse web dans la
// propriété `url`
const polygon = L.geoJSON(geojson, {
style: function (feature) {
// Par défaut c’est un bleu par défaut de leaflet mais
// sinon on utilise les couleurs de Bootstrap
var color = 'blue';
switch (feature.properties.color) {
case 'danger' : color = '#dc3545'; break
case 'warning' : color = '#ffc107'; break
case 'success' : color = '#198754'; break
}
return {color: color};
geojson.features.forEach(function (feature) {
// Dessine la forme de la tâche avec la proprieté `name` qui
// s’ffiche au survol et cliquable vers l’adresse web dans la
// propriété `url`
if (feature.geometry.type === 'Point') {
L.marker([
feature.geometry.coordinates[1],
feature.geometry.coordinates[0],
], {
icon: icons[feature.properties.color],
title: feature.properties.name,
clickUrl: feature.properties.url,
}).addTo(taskLayer).on('click', function (event) {
window.location.href = event.target.options.clickUrl;
});
} else {
const polygon = L.geoJSON(feature, {
style: function (feature) {
// Par défaut c’est un bleu par défaut de leaflet mais
// sinon on utilise les couleurs de Bootstrap
var color = 'blue';
switch (feature.properties.color) {
case 'danger' : color = '#dc3545'; break
case 'warning' : color = '#ffc107'; break
case 'success' : color = '#198754'; break
}
return {color: color};
}
}).bindTooltip(feature.properties.name).addTo(taskLayer).on('click', function (event) {
window.location.href = event.layer.feature.properties.url;
});
}
}).bindTooltip(feature0.name).addTo(taskLayer).on('click', function (event) {
window.location.href = event.layer.feature.properties.url;
});
// Ajoute un marqueur au centroïde de la forme (car les
// marqueurs gardent la même taille quelque-soit le zoom
L.marker(polygon.getBounds().getCenter(), {
icon: icons[feature0.color],
title: feature0.name,
clickUrl: feature0.url,
}).addTo(taskLayer).on('click', function (event) {
window.location.href = event.target.options.clickUrl;
});
});
taskLayer.addTo(layer);
}


+ 8
- 3
src/Controller/MapController.php View File

@ -22,14 +22,19 @@ class MapController extends AbstractController
'imagery' => [
'id' => 'osmfr',
],
'load_and_zoom' => [
];
// TODO dans le cas d’un nœud il n’y a pas de bounds mais on doit
// pouvoir trouver les coins d’une bbox autour sans trop de difficultés
if (isset($element['bounds'])) {
$josmCommands['load_and_zoom'] = [
'bottom' => $element['bounds']['minlat'],
'top' => $element['bounds']['maxlat'],
'left' => $element['bounds']['minlon'],
'right' => $element['bounds']['maxlon'],
'select' => sprintf('%s%d', $element['type'], $element['id']),
],
];
];
}
return $this->render('partials/_overpass-element-popup.html.twig', [
'element' => $element,


+ 1
- 1
src/Controller/ProjectController.php View File

@ -119,7 +119,7 @@ class ProjectController extends AbstractController
$task->setName($row[$col['name']]);
$task->setDescription($row[$col['description']]);
$task->setOsm($row[$col['osm']]);
$task->setGeojson(json_decode($row[$col['geojson']], true));
$task->setGeojson($row[$col['geojson']]);
if (isset($row[$col['status']]) and in_array($row[$col['status']], [
Task::STATUS_TODO,
Task::STATUS_DOING,


+ 1
- 4
src/Service/GeoJsonManager.php View File

@ -34,10 +34,7 @@ class GeoJsonManager
}
foreach ($data['features'] as $index => $feature) {
if (!isset($feature['properties'])) {
continue;
}
$feature['properties'] = array_merge($feature['properties'], [
$feature['properties'] = array_merge(!isset($feature['properties']) ? [] : $feature['properties'], [
'name' => $task->getName(),
'url' => $this->router->generate('app_task_show', ['slug' => $task->getSlug()], UrlGeneratorInterface::ABSOLUTE_URL),
'color' => $this->taskLifecycleStateMachine->getMetadataStore()->getPlaceMetadata($task->getStatus())['color'],


Loading…
Cancel
Save