Laravel maps: | Laravel translation checker: |
---|---|
larswiegers / laravel-maps Goto Github PK
View Code? Open in Web Editor NEWYour laravel maps libary.
Home Page: https://github.com/LarsWiegers/laravel-maps
License: MIT License
Your laravel maps libary.
Home Page: https://github.com/LarsWiegers/laravel-maps
License: MIT License
Hello,
first: Thank you for this package, I love it and is very easy to use!
I have a question regarding the leaflet version. No matter how much I scale the map, the tiles seem to be not sharp. Here is a screenshot of the map:
In the screenshot, I put down the map in the template using:
<x-maps-leaflet style="height: 300px; width: 300px; float: right" :zoomLevel="11" :markers="[['lat' => $lat, 'long' => $lon]]" :centerPoint="['lat' => $lat, 'long' => $lon]"></x-maps-leaflet>
Is there any way to improvie this or is this an issue with Leaflet?
Many greetings
Marc
i think we need a way to get leafmap map javascript instance inside blade template
When using the blade components there is some CSS making the map take up the entire height of the viewport. I have placed the following bit of CSS in my app.css:
#defaultMapId {
height: 100% !important;
}
This obviously fixes the issue but I was wondering if there's a better way of configuring this? Maybe (probably) I'm missing something. 🧐
PS: I can already see this package saving me a bunch of time in the future!
how if i want get lat lang via marker dragable ?
Hi,
Does anyone have any ideas why the tiles are not fully loading? See screenshot below.
I'm using Bootstrap, but I cannot see where any conflicts are coming from. I've also added my Mapbox API key to my .env file. Using Google works OK but I need multiple instances of the map so I need to use the Leaflet option.
The map itself is shown and zooming works but the marker/markers are not shown.
I'm using the latest version of the package with Laravel 8 and PHP 8
Fresh Laravel app.
View:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="antialiased">
<x-maps-leaflet></x-maps-leaflet>
</body>
</html>
Gives the following html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="antialiased">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#defaultMapId {
height: 100vh;
}
</style>
<div id="defaultMapId"></div>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
var mymap = L.map('mapid').setView([0, 0], 13);
let url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
L.tileLayer(url, {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
</script>
</body>
</html>
Is it possible to allow markers to be set by an user? I figured out how to place markers statically.
Hi,
Thanks for your awesome package. I try to display an info popup with some HTML.
When I do this :
<x-maps-google :zoomLevel="5" :centerPoint="['lat' => 43, 'long' => 5]" :markers="[['lat' => 43.5517, 'long' => 5.19472, 'title' => 'Your Title', 'info' => '<b>Title</b><br>Address<br>Zipcode City<br><a href="https://www.google.fr/maps/search/?api=1&query=Avenues+">Route</a>']]"></x-maps-google>
And I have this error :
How can I handle the HTML content in this variable ? Should I convert to something ?
Regards
You cannot edit the marker's coordinates by clicking on it.
I know blade tags dont have to use the {{ and }} to pass data
Currently, there's no way to add markers dynamically. For instance, I query the DB and get an array of coordinates. Currently you cannot loop through each location to place a marker on a single map (not multiple maps).
May be there's a way but I can't find it.
I really love this package as it has made the process of displaying maps and coordinates super easy.
Thank you so much for putting in the time to build this!
I do have one request for improving the functionality. Currently on both map types you are essentially hardcoding in the height which is making it a bit more difficult to use with css frameworks such as bootstrap and tailwindcss.
This would be something that I could easily change if the views were published out in the same way that the config file is.
Would you consider changing uncommenting the following lines in LaravelMapsServiceProvider.php
...
// Publishing the views.
$this->publishes([
__DIR__.'/../resources/views' => resource_path('views/vendor/maps'), // changed Laravel-maps to map since that is the value provided in loadViewsFrom
], 'views');
...
I have done a bit of digging in Laravel's package development documentation and noticed that when using $this->loadViewsFrom
it will look in two places. The first of which is the views folder within the package and the second is the views/vendor
folder within the resources directory.
When you use the loadViewsFrom method, Laravel actually registers two locations for your views: the application's resources/views/vendor directory and the directory you specify. So, using the courier package as an example, Laravel will first check if a custom version of the view has been placed in the resources/views/vendor/courier directory by the developer.
This would allow any other developers to make minor changes to the view without much effort.
Here is the documentation that I was reading by the way.
https://laravel.com/docs/9.x/packages#overriding-package-views
If you would like I can also test this and submit a PR if you would like, please just let me know in the comments on this issue and I can help as needed.
Hello and thank you very much for the effort you put in this package.
I am trying to implement the map in the following scenario.
A specific user interaction makes an ajax call to a route. From there the controller handles the request by returning a small blade with some information. The controller is using the return view()
to send back the blade. Inside this blade I have the .
When the ajax request returns, javascript handles it by applying the blade to a div element.
When doing this, the map is not rendered.
I notice that if the is rendered onpageload , it pushes some scripts to html .
But if the is being rendered afterwards through ajax, the snippets are not pushed to
Am I approaching this the wrong way? Do you have any suggestions on how to initialize the map asynchronously maybe?
Thank you for your time.
current version of leaflet is - 1.9.4 on https://www.npmjs.com/package/leaflet
u can update this? or update version only on blade template is worked?
When supplying a centerPoint array ordered ['long' => ..., 'lat' => ...]
rather than ['lat' => ..., 'long' => ...]
, the coordinates are switched. This is because of
I suggest changing it to
var mymap = L.map('{{$mapId}}').setView([{{$centerPoint['lat'] ?? $centerPoint[0]}}, {{$centerPoint['long'] ?? $centerPoint[1]}}], {{$zoomLevel}});
im tyring to use https://github.com/lennardv2/Leaflet.awesome-markers
tried to pass icon as suggested but getting error
$markers[] = [
'lat' => $record->latitude,
'long' => $record->longitude,
'info' => $info,
'icon' => L.AwesomeMarkers.icon(array(
'icon' => 'spinner',
'prefix' => 'fa',
'markerColor' => 'red'
))
];
and
<x-maps-leaflet id="map" style="height: 400px;" tile-host="mapbox" :zoomLevel="11" :centerPoint="['lat' => 23.0225, 'long' => 72.5714]"
:markers="$markers">
Hi!
What do I need to declare in the view to change the tile host?
<x-maps-leaflet :tileHost="'http://c.tile.stamen.com/toner-labels/{z}/{x}/{y}.png'" :centerPoint="['lat' => $hotel->latitude-0.8, 'long' => $hotel->longitude]" :zoomLevel="9" :markers="[['lat' => $hotel->latitude, 'long' => $hotel->longitude]]">
This is what I'm doing at the moment, but all I get is a grey box.
Thanks!
an you give me an example of how you would make this loop as i keep getting the error: Undefined array key 0
controller code:
$drivers = User::where('status', '=', 'active')->get();
//array for drivers location without key
$markers = [];
foreach ($drivers as $driver) {
$markers[] = [
'lat' => $driver->latitude,
'long' => $driver->longitude,
];
}
View Code
<x-maps-leaflet :markers="$markers" :centerPoint="['lat' => 51.7792614, 'long' => 3.212754]" :centerPoint="['lat' => 51.7792614, 'long' => 3.212754]"></x-maps-leaflet>
Currently popups do not open when clicked when there is $marker['info'] provided.
I can submit a PR for this functionality if you think this enhancement would be useful.
Hey Lars,
Thanks for trying to update gonoware/laravel-maps
to PHP8 and for creating this repository. I'm currently trying to update one of my Laravel instances from version 8 to 9 and was forced away from gonoware/laravel-maps
since there hasn't been any activity from the owner for over a year.
After a bit of puzzling, I found that $markers[lng]
in this repository has been changed to $markers[long]
. However, I still haven't figured out if it is possible to hook into the Leaflet Map via Javascript events as it was possible in gonoware/laravel-maps
. See this section of the readme for a reference.
Is this something I have to look for in Leaflet.JS or does your code have possibilities for this as well? Thanks in advance!
PS. Would you like me to create a Pull request for a little documentation for the migration from gonoware/laravel-maps to your repository? Or don't you think that's necessary?
Make the section of the documentation ( readme for now) clearer on how HTML is not escaped and as such quotes will interfere with the resulting code. the double quotes character should not be used.
When including the component inside a livewire component with an @if tag, the component throws a Uncaught (in promise) ReferenceError: L is not defined in the console and fails to render the rest of the page.
It works inside the livewire component if not inside an @if tag.
I'm guessing this has to do with the order the scripts are loaded? Any help would be hugely appreciated. Thanks!
I am attempting to use multiple maps for different purposes on the same page.
This appears to be causing issues with the let map= ...
The error is as follows: SyntaxError: Can't create duplicate variable: 'url'
Any recommendations on how to address this? The url should only need to be declared a single time per page.
Is there a way to prevent it from attempting to create a duplicate variable.
Hi,
Currently, I can't upgrade my personal project from Laravel 8 to 9, because of the laravel-maps
package, and one of its dependencies : illuminate/support
.
By upgrading this dependancy from 8.0 to 9.0, it will allow to upgrade to Laravel 9.
When I attempt to use laravel-maps within a wire-elements modal I get the following error.
@LarsWiegers do you have any recommendations for how to address this? I am currently just using one of the examples from the readme for testing purposes.
<div class="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-200">
<div class="px-4 py-5 sm:p-6">
<x-maps-leaflet :centerPoint="['lat' => 52.16, 'long' => 5]"></x-maps-leaflet>
</div>
</div>
The above html code is a part of the following livewire component that has the attached class.
<?php
namespace App\Http\Livewire\Modals;
use LivewireUI\Modal\ModalComponent;
class ViewMap extends ModalComponent
{
public function render()
{
return view('livewire.modals.view-map');
}
}
I am able to use this component when not including it in a wire-element/modal but I am unsure why I get this error when attempting to load the map within the modal.
Unhandled Promise Rejection: ReferenceError: Can't find variable: L
If I try to use blade tags to pull a latitude/longtitude from a DB it doesn't seem to like it. I've checked my syntax and as far as I'm aware it's ok.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.