Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[mapbox] Easier way to set Markers #5

Open
driesvints opened this issue Jul 11, 2020 · 14 comments
Open

[mapbox] Easier way to set Markers #5

driesvints opened this issue Jul 11, 2020 · 14 comments
Labels
enhancement New feature or request

Comments

@driesvints
Copy link
Member

driesvints commented Jul 11, 2020

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.

@driesvints driesvints added the enhancement New feature or request label Jul 11, 2020
@bilfeldt
Copy link

bilfeldt commented Aug 4, 2020

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
Copy link
Member Author

driesvints commented Aug 6, 2020

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
Copy link
Member Author

driesvints commented Aug 9, 2020

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
Copy link

bilfeldt commented Aug 9, 2020

@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
Copy link
Member Author

driesvints commented Aug 10, 2020

@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
Copy link

bilfeldt commented Aug 10, 2020

... 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
Copy link
Member Author

driesvints commented Aug 10, 2020

@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
Copy link

happytodev commented Oct 22, 2021

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 :

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

What do you mean about this ?

@driesvints
Copy link
Member Author

driesvints commented Nov 2, 2021

@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
Copy link

happytodev commented Sep 1, 2022

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
Copy link
Member Author

driesvints commented Sep 1, 2022

I'm no longer maintaining this library, sorry.

@happytodev
Copy link

happytodev commented Sep 1, 2022

I'm no longer maintaining this library, sorry.

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

@driesvints
Copy link
Member Author

driesvints commented Sep 1, 2022

@ryangjchandler and @danharrin are maintaining this library now.

@happytodev
Copy link

happytodev commented Sep 2, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Development

No branches or pull requests

3 participants