[mapbox] Easier way to set Markers

[driesvints]

Atm you're limited to passing coordinates for Markers. This prevents you from using extended features from Mapbox: https://docs.mapbox.com/mapbox-gl-js/api/markers

We'll need a way to easier pass marker configuration.

[bilfeldt]

We are doing this using GeoJSON which is one of the most flexible ways of plotting with MapBox and there are multiple packages available to create GeoJSON from the backed.

I hope you can use the examples below @driesvints and let me know if you would like to see the entire components we have.

Adding GeoJson datasource

var geojson = @json($geojson)

Using GeoJSON as source and layers

Adding GeoJOSN as a source makes it possible to use mapbox.addLayers

map.addSource('datacollection', {
    "type":"geojson",
    "data":geojson
});

// Add routes
map.addLayer({
    'id': 'routes',
    'type': 'line',
    'source': 'datacollection',
    'paint': {
        'line-width': [
            'coalesce',
            ['get', 'line-width'],
            3,
        ],
        'line-color': [
            'coalesce',
            ['get', 'line-color'],
            ['get', 'color'],
            'gray',
        ]
    },
    'filter': ['==', 'type', 'route']
});

// Add areas
map.addLayer({
    'id': 'areas',
    'type': 'fill',
    'source': 'datacollection',
    'paint': {
        'fill-opacity': [
            'coalesce',
            ['get', 'fill-opacity'],
            ['get', 'opacity'],
            0.3,
        ]
    },
    'filter': ['==', 'type', 'area']
});

// ... many more. These can be added as slots.

Plotting markers from a GeoJSON

Plotting markers from GeoJSON can be done even more flexible, but this require that you do not use layers

geojson.features.filter(feature => feature.properties.type == 'something').forEach(function(marker) { // Here we filter only a subset of the GeoJSON

    {{-- create a DOM element for the popup --}}
    var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(marker.properties.html); // Here we take the html from the GeoJSON but it could also be hardcoded

    // add marker to map @see: https://docs.mapbox.com/mapbox-gl-js/example/add-a-marker/
    new mapboxgl.Marker()
        .setLngLat(marker.geometry.coordinates)
        .setPopup(popup){{-- @see: https://docs.mapbox.com/mapbox-gl-js/example/set-popup/ or https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/ --}}
        .addTo(map);
});

[driesvints]

Hey @bilfeldt. Thanks for sending this in! I'll take a thorough look at this in the next couple of weeks when I find a moment.

[driesvints]

I'm gonna park this a bit for after the initial launch. Want to get the package out of the door first. This does look promising. I'm trying to find a good library for this so feel free to share if you have any suggestions @bilfeldt.

[bilfeldt]

@driesvints There are two widely used packages for handling GeoJSON:

1. jmikola/geojson
2. phayes/geophp

The first one is the one used by the package laravel-mysql-spatial which adds MySQL Spatial support to Eloquent, so a lot of people using GeoSpatial data would probably already have that package installed.

That being said, a MapBox component should be agnostic when it comes to how the GeoJSON data is generated. As long a valid GeoJSON is used as the data source then it should not matter how it's generated.

[driesvints]

@bilfeldt both of these look good although I'm a bit concerned that they aren't maintained anymore. Last update for both was in 2016.

[bilfeldt]

... I'm a bit concerned that they aren't maintained anymore. Last update for both was in 2016.

I get what you mean - I had the same considerations myself - but in all fairness GeoJSON is very static and the packages has very few issues compared to the number of installs.

Building another GeoJSON package using some simple construction logic and spatie/data-transfer-object would be relatively easy if these packages were to be deprecated. My conclusion was that GeoJSON is still the most reliable way of passing geo data around - even with only slightly maintained GeoJSON php packages available at the moment.

[driesvints]

@bilfeldt gotcha. Even though GeoJSON is static I'm more concerned that both libraries aren't tested on any current actively maintained PHP version. I might take the time to PR that to one of these libraries myself if I ever get back to this. It would at least give me a bit more trust to use one of them.

[happytodev]

Hi @driesvints do you planned to work on this in next weeks / months ? It will be great to have more functionnalities on the markers ;-)

There is two packages, maybe, can help to do this :

• https://packagist.org/packages/mjaschen/phpgeo
• https://packagist.org/packages/league/geotools

They are recents, maintained and compatible with recents versions of PHP.

What do you mean about this ?

[driesvints]

@happytodev I don't feel like I can find much time in the next few weeks to work much on this package but I hope to get to all of this eventually. I've already started picking up some bug fixing and minor new features recently. Hope I can continue that trend.

[happytodev]

Hi @driesvints, I know that you are very busy, but do you have any news on the markers ? Do you have a plan to add some functionnalities ?

[driesvints]

I'm no longer maintaining this library, sorry.

[happytodev]

I'm no longer maintaining this library, sorry.

I didn't know that @driesvints . Is anyone else doing this?

[driesvints]

@ryangjchandler and @danharrin are maintaining this library now.

[happytodev]

Haha well, I often talk with @danharrin and @ryangjchandler in the Filament's Discord. They will continue to be annoying by me :-(
Thanks @driesvints !