larswiegers / laravel-maps Goto Github PK

View Code? Open in Web Editor NEW

252.0 6.0 35.0 1.19 MB

Your laravel maps libary.

Home Page: https://github.com/LarsWiegers/laravel-maps

License: MIT License

PHP 83.04% Blade 16.96%

laravel maps map googlemaps leafletjs package hacktoberfest

laravel-maps's Introduction

Hi there 👋

Laravel maps:	Laravel translation checker:

Star History

laravel-maps's People

Contributors

Stargazers

Watchers

laravel-maps's Issues

[Leaflet] Map not sharp

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

Unable to locate a class or view for component [maps-leaflet].

Hi, i found issue when i push to production. it seems the component locate unknown. can you fix this issue?

need a way to get leaflet (or google map) javscript instance

i think we need a way to get leafmap map javascript instance inside blade template

#defaultMapId has height of 100vh

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!

marker dragable

how if i want get lat lang via marker dragable ?

Missing Tiles

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.

[Google Map] Marker not shown

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

Can't find variable: urldefaultMapId

I'm using Livewire
Why it's commented out?

Well, nothing works in livewire with Volt

Empty screen

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 &copy; <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>

But renders as this:

Placement of markers by user

Is it possible to allow markers to be set by an user? I figured out how to place markers statically.

Error endif when put HTML in popup info ?

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' => 'Title Address Zipcode City <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

unexpected token ':'

i'm trying to get the examples working like so

<x-maps-google :markers="[['lat' => 52.16444513293423, 'long' => 5.985622388024091]]"></x-maps-google>

and getting this strange error

uncaught SyntaxError: Unexpected token ':' (at dashboard:565:20)

You cannot edit the marker's coordinates by clicking on it.

Multiple markers dynamically

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.

View Publishing

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.

call x-maps-google with ajax

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.

update leaflet

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 centerPoint array in different order, centerPoint coordinates are switched (Leaflet)

When supplying a centerPoint array ordered ['long' => ..., 'lat' => ...] rather than ['lat' => ..., 'long' => ...], the coordinates are switched. This is because of

laravel-maps/resources/views/components/leaflet.blade.php

Line 26 in cd46464

  var mymap = L.map('{{$mapId}}').setView([{{implode(", ", $centerPoint)}}], {{$zoomLevel}}); 

I suggest changing it to
var mymap = L.map('{{$mapId}}').setView([{{$centerPoint['lat'] ?? $centerPoint[0]}}, {{$centerPoint['long'] ?? $centerPoint[1]}}], {{$zoomLevel}});

help with Leaflet.awesome-markers

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">

Tiles

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!

Cant create dynamic markers

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>

Popup open when clicked

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.

Migrating from gonoware/laravel-maps / Javascript events available?

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?

clear up section about html escaping

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.

Livewire Uncaught (in promise) ReferenceError: L is not defined

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!

Multiple Maps Causing Errors

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.

Compatibility with Laravel 9

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.

Maps within wire-elements/modal

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

Blade Tags

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.

larswiegers / laravel-maps Goto Github PK

laravel-maps's Introduction

Hi there 👋

Star History

laravel-maps's People

Contributors

Stargazers

Watchers

Forkers

laravel-maps's Issues

Recommend Projects

Recommend Topics

Recommend Org