Skip to content

Commit

Permalink
🗺️ Börjar bli fiiin
Browse files Browse the repository at this point in the history
  • Loading branch information
@bonny
bonny committed May 11, 2024
1 parent f7d7aff commit 908478c
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 48 deletions.
56 changes: 40 additions & 16 deletions app/Http/Controllers/ApiController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@
/**
* Controller för plats, översikt och detalj
*/
class ApiController extends Controller
{
public function eventsNearby(Request $request, Response $response)
{
class ApiController extends Controller {
public function eventsNearby(Request $request, Response $response) {
// The number of events to get. Max 50. Default 10.
$lat = (float) $request->input("lat");
$lng = (float) $request->input("lng");
Expand All @@ -31,7 +29,7 @@ public function eventsNearby(Request $request, Response $response)
$numTries = 0;
$maxNumTries = 20;
$nearbyCount = 25;

$nearbyInKm = $request->input('distance');
$allowNearbyExpand = false;
if (!is_numeric($nearbyInKm)) {
Expand Down Expand Up @@ -101,8 +99,7 @@ public function eventsNearby(Request $request, Response $response)
return response()->json($json)->withCallback($request->input('callback'));
}

public function events(Request $request, Response $response)
{
public function events(Request $request, Response $response) {
// The number of events to get. Max 50. Default 10.
$limit = (int) $request->input("limit", 10);

Expand Down Expand Up @@ -228,8 +225,7 @@ public function events(Request $request, Response $response)
return response()->json($json)->withCallback($callback);
}

public function event(Request $request, Response $response, $eventID)
{
public function event(Request $request, Response $response, $eventID) {
$event = CrimeEvent::findOrFail($eventID);

$eventArray = $event->toArray();
Expand Down Expand Up @@ -261,8 +257,7 @@ public function event(Request $request, Response $response, $eventID)
return response()->json($json)->withCallback($request->input('callback'));
}

public function areas(Request $request, Response $response)
{
public function areas(Request $request, Response $response) {
$data = [
"data" => [],
];
Expand All @@ -285,8 +280,7 @@ public function areas(Request $request, Response $response)
* @param Response $response [description]
* @return JsonResponse
*/
public function eventsInMedia(Request $request, Response $response)
{
public function eventsInMedia(Request $request, Response $response) {

$limit = (int) $request->input("limit", 10);

Expand All @@ -299,7 +293,7 @@ public function eventsInMedia(Request $request, Response $response)

$callback = $request->input('callback');

$events = CrimeEvent::whereHas('newsarticles', function($query) use ($media) {
$events = CrimeEvent::whereHas('newsarticles', function ($query) use ($media) {
$query->where('url', 'like', "%{$media}%");
})->with('newsarticles')->orderBy("created_at", "desc")->paginate($limit);

Expand Down Expand Up @@ -347,7 +341,7 @@ public function eventsInMedia(Request $request, Response $response)
// Keep only some keys from the articles array.
$newsArticles = $item->newsarticles->toArray();
$keysToKeep = array_flip(['title', 'shortdesc', 'url']);
$newsArticles = array_map(function($itemArticle) use ($keysToKeep) {
$newsArticles = array_map(function ($itemArticle) use ($keysToKeep) {
return array_intersect_key($itemArticle, $keysToKeep);
}, $newsArticles);

Expand Down Expand Up @@ -392,7 +386,7 @@ public function eventsInMedia(Request $request, Response $response)
public function mostViewedRecently(Request $request, Response $response) {
$events = Helper::getMostViewedEventsRecently($request->input('minutes', 10), $request->input('limit', 10));

$events = $events->map(function($data) {
$events = $events->map(function ($data) {
$item = $data->crimeEvent;

return [
Expand Down Expand Up @@ -431,4 +425,34 @@ public function mostViewedRecently(Request $request, Response $response) {
return response()->json($json)->withCallback($request->input('callback'));
}

/**
* Hämta data för eventsMap-komponenten.
*/
public function eventsMap() {

$events = CrimeEvent::orderBy("created_at", "desc")->limit(300)->get();

$json = [
"data" => [],
];

// create array with data is a format more suited for app and web
foreach ($events as $item) {
$event = [
"id" => $item->id,
'time' => $item->getParsedDateInFormat('%H:%M'),
'headline' => $item->getHeadline(),
"type" => $item->parsed_title,
"lat" => (float) $item->location_lat,
"lng" => (float) $item->location_lng,
"image" => $item->getStaticImageSrc(320, 320, 2),
"permalink" => $item->getPermalink(true),
];

$json["data"][] = $event;
}

// return json or jsonp if ?callback is set
return $json;
}
}
98 changes: 68 additions & 30 deletions resources/views/components/events-map.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
// Invalidate size after css anim has finished.
setTimeout(() => {
map.invalidateSize({
pan: false
pan: true
});
}, 250);
});
Expand All @@ -40,62 +40,74 @@
return new L.Control.Watermark(opts);
}
var markerIconFar = L.divIcon({
className: 'EventsMap-marker-icon EventsMap-marker-icon--far',
});
var markerIconNear = L.divIcon({
className: 'EventsMap-marker-icon EventsMap-marker-icon--near',
});
class EventsMap {
mapContainer = null;
map;
mapContainer;
zoom = {
default: 4,
};
constructor(mapContainer) {
this.mapContainer = mapContainer;
console.log('EventsMap.constructor:', this.mapContainer);
this.initMap();
}
async loadMarkers() {
console.log('EventsMap.loadMarkers:', this);
const response = await fetch('/api/eventsMap');
const data = await response.json();
const events = data.data
console.log('EventsMap.loadMarkers data:', events);
events.forEach(event => {
L.marker([event.lat, event.lng])
.setIcon(markerIconFar)
.addTo(this.map)
.bindPopup(`${event.time} ${event.headline}`);
});
}
initMap() {
console.log('EventsMap.initMap:', this.mapContainer);
// Init in Jönköping
let map = L.map(this.mapContainer).setView([59.1, 14.5], 6);
let map = L.map(this.mapContainer);
this.map = map;
window.map = map;
console.log('window.map now available', window.map);
map.on('load', () => {
this.loadMarkers();
});
map.setView([62, 15.5], this.zoom.default);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a>'
}).addTo(map);
L.control.watermark({
position: 'topright'
}).addTo(map);
// map.on("click", function(evt) {
// console.log("click expand", evt);
// evt.stopPropagation();
// map.getContainer().classList.toggle('is-expanded');
// map.invalidateSize();
// });
// L.marker([51.5, -0.09]).addTo(map)
// .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
// .openPopup();
}
}
document.addEventListener('DOMContentLoaded', function() {
let mapContainers = document.querySelectorAll('.EventsMap');
mapContainers.forEach(element => {
console.log('element:', element);
new EventsMap(element);
});
// var map = L.map('EventsMap').setView([51.505, -0.09], 13);
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map);
// L.marker([51.5, -0.09]).addTo(map)
// .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
// .openPopup();
});
</script>
@endpush
Expand All @@ -118,14 +130,40 @@ class EventsMap {
padding: 2px;
cursor: pointer;
}
.EventsMap-control-expand img {
display: block;
}
.EventsMap .leaflet-marker-icon,
.EventsMap .leaflet-marker-shadow {
animation: fadein .75s;
}
.EventsMap .leaflet-popup {
max-width: 50vw;
}
.EventsMap-marker-icon {
--icon-size: 10px;
background-color: var(--color-red);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .25);
width: var(--icon-size);
height: var(--icon-size);
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
@endpush
@endonce

<div>
<p>Karta.</p>
<div class="EventsMap">Laddar karta...</div>
</div>
<div class="EventsMap">Laddar karta...</div>
5 changes: 3 additions & 2 deletions resources/views/design.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@

<x-events-map />

<x-text-tv-box />

<x-latest-events-box />

<x-trending-events-box />

<x-text-tv-box />

<h1>En huvudrubrik av storlek h1. Lite överdrivet lång kanske men vi måste ju testa radbrytningar och så vidare</h1>

<p>
Expand Down
1 change: 1 addition & 0 deletions routes/api.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@
Route::get('/events', [ApiController::class, 'events']);
Route::get('/eventsInMedia', [ApiController::class, 'eventsInMedia']);
Route::get('/mostViewedRecently', [ApiController::class, 'mostViewedRecently']);
Route::get('/eventsMap', [ApiController::class, 'eventsMap']);

0 comments on commit 908478c

Please sign in to comment.