Comments (14)
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.
from blade-ui-kit.
@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.
from blade-ui-kit.
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);
});
from blade-ui-kit.
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.
from blade-ui-kit.
@driesvints There are two widely used packages for handling GeoJSON:
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.
from blade-ui-kit.
@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.
from blade-ui-kit.
... 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.
from blade-ui-kit.
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 ?
from blade-ui-kit.
@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.
from blade-ui-kit.
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 ?
from blade-ui-kit.
I'm no longer maintaining this library, sorry.
from blade-ui-kit.
I'm no longer maintaining this library, sorry.
I didn't know that @driesvints . Is anyone else doing this?
from blade-ui-kit.
@ryangjchandler and @danharrin are maintaining this library now.
from blade-ui-kit.
Haha well, I often talk with @danharrin and @ryangjchandler in the Filament's Discord. They will continue to be annoying by me :-(
Thanks @driesvints !
from blade-ui-kit.
Related Issues (20)
- Alpine V3 support HOT 1
- Looking for a co-maintainer HOT 9
- Uncaught RangeError: Maximum call stack size exceeded. HOT 6
- many incompatibility with laravel 9 and alpinejs3
- Better error handling for Unsplash component
- Dramatic performance difference between blade component and blade helper HOT 1
- defaultDate property broken before mouseenter is triggered
- How do I run an AlpineJS function when a new x-color-picker color is selected?
- Info: Bootstrap classes for form components
- @ bukStyles does not load any styles - How to troubleshoot? HOT 1
- Problem with conversion to HTML
- app uses buk components instead of resources/view/components
- Carbon formatting not working at all when using local HOT 1
- How do we get the size to work properly? HOT 2
- Conflict with filament 3 styles HOT 15
- TipTap Support
- Laravel default skeleton conflict HOT 2
- Laravel 11 Support HOT 2
- window.Alpine.plugin is not a function HOT 1
- Unable to install Blade UI Kit on Laravel 11 due to dependency conflict with Carbon HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blade-ui-kit.