Не отображаются всплывающие окна и разметки в листовке для уже вставленной карты с помощью листовки? - PullRequest
Новая
       0

Не отображаются всплывающие окна и разметки в листовке для уже вставленной карты с помощью листовки?

0 голосов
/ 05 марта 2020

Здесь я хочу добавить код для панели поиска и всплывающих окон:

  1. К сожалению, всплывающие окна не отображаются на карте.
  2. Separetly, это работает для всплывающих окон и панели поиска .
  3. В этом проекте я использую django, получаю данные и показываю всплывающие окна. Я добавлю изображение для всплывающих окон, которое работает индивидуально. 

      <!DOCTYPE html>
<html lang="en">
    {%load static %}
    {% load leaflet_tags %}
<head>
    {% leaflet_js %}
    {% leaflet_css %}
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type = "text/javascript" src = "{% static 'dist/leaflet.ajax.js' %}"></script>

    <title>Home</title>


    <style type="text/css">
    #gis{
        width: 80%;
        height: 700px;
    }
    </style>

</head>
<body>
    <h3>Checking statement</h3>
    <br>

    <script type = "text/javascript">
      
        var dataurl = '{% url "incidences_dataset" %}';

        window.addEventListener("map:init", function (event) {
          var map = event.detail.map;
        
          // Download GeoJSON data with Ajax
          fetch(dataurl)
            .then(function(resp) {
              return resp.json();
            })
            .then(function(data) {
              L.geoJson(data, {
                onEachFeature: function onEachFeature(feature, layer) {
                  var props = feature.properties;
                  var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:black;" href="{% url 'place'%}"  style="font-color:white"><strong>${props.name}</strong></a>`;
                  layer.bindPopup(content);
              }}).addTo(map);
              

             });
          });
        
        

    </script>
    {% leaflet_map "gis"  callback="window.our_layers" %}


               

           
</body>
</html>

Вывод: enter image description here ** На самом деле я объединил два файла здесь, но панель поиска работает только, пожалуйста, введите код ** Спасибо в аванс 

<html>
<head>
    {%load static %}

  <meta charset="utf-8" />
  <title>Searching map services</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>


  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.3.3/dist/esri-leaflet.js"
  integrity="sha512-cMQ5e58BDuu1pr9BQ/eGRn6HaR6Olh0ofcHFWe5XesdCITVuSBiBZZbhCijBe5ya238f/zMMRYIMIIg1jxv4sQ=="
  crossorigin=""></script>


  <!-- Load Esri Leaflet Geocoder from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.2/dist/esri-leaflet-geocoder.css"
    integrity="sha512-IM3Hs+feyi40yZhDH6kV8vQMg4Fh20s9OzInIIAc4nx7aMYMfo+IenRUekoYsHZqGkREUgx0VvlEsgm7nCDW9g=="
    crossorigin="">
  <script src="https://unpkg.com/esri-leaflet-geocoder@2.3.2/dist/esri-leaflet-geocoder.js"
    integrity="sha512-8twnXcrOGP3WfMvjB0jS5pNigFuIWj4ALwWEgxhZ+mxvjF5/FBPVd5uAxqT8dd2kUmTVK9+yQJ4CmTmSg/sXAQ=="
    crossorigin=""></script>



  <style>
      body { margin:0; padding:0; }
      #map { position: absolute; top:0; bottom:0; right:0; left:0; 
        width: 80%;
        height: 700px;}
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map('map').setView([16.91587,
  82.159257999999], 10);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();

  L.esri.Geocoding.geosearch({
    providers: [
      arcgisOnline,
      L.esri.Geocoding.mapServiceProvider({
        label: 'States and Counties',
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer',
        layers: [2, 3],
        searchFields: ['NAME', 'STATE_NAME']
      })
    ]
  }).addTo(map);
  var dataurl = '{% url "incidences_dataset" %}';
  window.addEventListener("map:init", function (event) {
    /*var map = event.detail.map; */
  
    // Download GeoJSON data with Ajax
    fetch(dataurl)
      .then(function(resp) {
        return resp.json();
      })
      .then(function(data) {
        L.geoJson(data, {
          onEachFeature: function onEachFeature(feature, layer) {
            var props = feature.properties;
            var content = `<a class="btn btn-primary btn-sm btn-block" align="center" style="color:black;" href="{% url 'place'%}"  style="font-color:white"><strong>${props.name}</strong></a>`;
            layer.bindPopup(content);
        }}).addTo(map);
        

       });
    });

</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...