search

LarsWiegers / laravel-maps

Your laravel maps libary.
https://github.com/LarsWiegers/laravel-maps
MIT License
254 stars 35 forks source link

Popup open when clicked #27

Closed ryangurn closed 2 years ago

ryangurn commented 2 years ago

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.

LarsWiegers commented 2 years ago

Hi @ryangurn, this seems to work on my end. could you sent some example code of what you are using? Are you also on the latest version?

ryangurn commented 2 years ago

@LarsWiegers, so this code example is part of quite a dynamic setup and at the moment it is only showing one popup.

I do plan to have it show multiple popups as well.

<x-maps-leaflet class="z-0" tile-host="mapbox" style="height: 50vh; width: 70vh;" :markers="[['lat' => $coordinates[$hash]['lat'], 'long' => $coordinates[$hash]['long'], 'info' => 'test test']]" :center-point="['lat' => $coordinates[$hash]['lat'], 'long' => $coordinates[$hash]['long']]"></x-maps-leaflet>
ryangurn commented 2 years ago

I can also submit a PR for this as well if needed. I have identified what is not working in the javascript part of the leaflet view.

LarsWiegers commented 2 years ago

Hi @ryangurn,

could you attach a screenshot of the page where you are seeing your problem?

I cant seem to see any problems on my end.

a pr is welcome but i would need a better definition of the problem

ryangurn commented 2 years ago

will do, I will screenshot it when I am able.

thanks @LarsWiegers

ryangurn commented 2 years ago

@LarsWiegers, ok so here is the generated javascript that comes from using the component.

    var mymap = L.map('defaultMapId').setView([35.417311, -120.876666], 13);
             var marker = L.marker([35.417311, -120.876666]);
         marker.bindPopup("yrdy d");
        marker.addTo(mymap);

            let url = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<TOKEN>';
        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);

Here is a screenshot of the map with no popup. Additionally there is no click even to have the popup display if it showed in the first place.

Screen Shot 2022-03-22 at 5 50 37 PM
LarsWiegers commented 2 years ago

image

Hi @ryangurn this is what I see, this is very weird. can you maybe try reinstalling?

ryangurn commented 2 years ago

i'll give that a shot

ryangurn commented 2 years ago

I ran composer reinstall larswiegers/laravel-maps and I am still having the same issue.

Screen Shot 2022-03-23 at 7 22 34 AM 

    var mymap = L.map('defaultMapId').setView([37.9941, -122.9732], 13);
             var marker = L.marker([37.9941, -122.9732]);
         marker.bindPopup("yrdy d");
        marker.addTo(mymap);

            let url = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<TOKEN>';
        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);
LarsWiegers commented 2 years ago

Strange, can you check your composer.lock what version you are on?

ryangurn commented 2 years ago

After verifying it seems to be v0.10...

However I noticed that you added a new version v0.11 and that didn't work either after updating

v0.10


{
  "name": "larswiegers/laravel-maps",
  "version": "v0.10",
  "source": {
      "type": "git",
      "url": "https://github.com/LarsWiegers/laravel-maps.git",
      "reference": "1826c27c80849f0b41d205d1a13867bf44eecd7f"
  },
  "dist": {
      "type": "zip",
      "url": "https://api.github.com/repos/LarsWiegers/laravel-maps/zipball/1826c27c80849f0b41d205d1a13867bf44eecd7f",
      "reference": "1826c27c80849f0b41d205d1a13867bf44eecd7f",
      "shasum": ""
  },
  "require": {
      "gajus/dindent": "^2.0.2",
      "illuminate/support": "^8.0|^9.0",
      "php": "^7.4|^8.0"
  },
  "require-dev": {
      "orchestra/testbench": "^6.0|^7.0",
      "phpunit/phpunit": "^9.0"
  },
  "type": "library",
  "extra": {
      "laravel": {
          "providers": [
              "Larswiegers\\LaravelMaps\\LaravelMapsServiceProvider"
          ],
          "aliases": {
              "LaravelMaps": "Larswiegers\\LaravelMaps\\LaravelMapsFacade"
          }
      }
  },
  "autoload": {
      "psr-4": {
          "Larswiegers\\LaravelMaps\\": "src"
      }
  },
  "notification-url": "https://packagist.org/downloads/",
  "license": [
      "MIT"
  ],
  "authors": [
      {
          "name": "Lars Wiegers",
          "email": "larswiegers@live.nl",
          "role": "Developer"
      }
  ],
  "description": "A new way to handle maps in your laravel applications.",
  "homepage": "https://github.com/larswiegers/laravel-maps",
  "keywords": [
      "laravel-maps",
      "larswiegers"
  ],
  "support": {
      "issues": "https://github.com/LarsWiegers/laravel-maps/issues",
      "source": "https://github.com/LarsWiegers/laravel-maps/tree/v0.10"
  },
  "time": "2022-03-10T08:21:17+00:00"
},

V0.11

{
    "name": "larswiegers/laravel-maps",
    "version": "v0.11",
    "source": {
        "type": "git",
        "url": "https://github.com/LarsWiegers/laravel-maps.git",
        "reference": "fd9c65320c4c83c7f2d600e3e08a48686ee97806"
    },
    "dist": {
        "type": "zip",
        "url": "https://api.github.com/repos/LarsWiegers/laravel-maps/zipball/fd9c65320c4c83c7f2d600e3e08a48686ee97806",
        "reference": "fd9c65320c4c83c7f2d600e3e08a48686ee97806",
        "shasum": ""
    },
    "require": {
        "gajus/dindent": "^2.0.2",
        "illuminate/support": "^8.0|^9.0",
        "php": "^7.4|^8.0"
    },
    "require-dev": {
        "orchestra/testbench": "^6.0|^7.0",
        "phpunit/phpunit": "^9.0"
    },
    "type": "library",
    "extra": {
        "laravel": {
            "providers": [
                "Larswiegers\\LaravelMaps\\LaravelMapsServiceProvider"
            ],
            "aliases": {
                "LaravelMaps": "Larswiegers\\LaravelMaps\\LaravelMapsFacade"
            }
        }
    },
    "autoload": {
        "psr-4": {
            "Larswiegers\\LaravelMaps\\": "src"
        }
    },
    "notification-url": "https://packagist.org/downloads/",
    "license": [
        "MIT"
    ],
    "authors": [
        {
            "name": "Lars Wiegers",
            "email": "larswiegers@live.nl",
            "role": "Developer"
        }
    ],
    "description": "A new way to handle maps in your laravel applications.",
    "homepage": "https://github.com/larswiegers/laravel-maps",
    "keywords": [
        "laravel-maps",
        "larswiegers"
    ],
    "support": {
        "issues": "https://github.com/LarsWiegers/laravel-maps/issues",
        "source": "https://github.com/LarsWiegers/laravel-maps/tree/v0.11"
    },
    "time": "2022-03-23T09:30:51+00:00"
},
LarsWiegers commented 2 years ago

Very weird.

I dont know what to do now.

ryangurn commented 2 years ago

i'll mess around and submit a pr... we can chat about it and decide what to do