Визуализация карты / всплывающее окно с Django и Leaflet - PullRequest
Новая
       21

Визуализация карты / всплывающее окно с Django и Leaflet

0 голосов
/ 20 ноября 2018

enter image description here Я новичок в Django и много недель борюсь с проблемой.Моя страница шаблона / html отлично работает с листовкой, но когда я запускаю шаблон на Django, он не загружает мою карту (файл geoJson).Я пытался просмотреть все учебники, но не повезло.Может ли кто-нибудь помочь, пожалуйста?Я загрузил картинку, которая в порядке, используя только листовки и HTML, но на сервере Django пустая.

Ниже мой код: 

[![<!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content = "width=device-width,initial-scale=1"/>
     <title>
        Map Visualization
    </title>
     <!-- Leaflet -->
     <link rel= "stylesheet" href="../../leaflet/leaflet.css"/>
     <script src = "../../leaflet/leaflet.js"></script>
     <script src ="../data/countries.geojson"></script>
     <style type = "text/css">
      #map {
          height : 800px; 
          width: 70%;
          align: left
          } 

      #filter {
          height:800px;
          width: 20%
          align: right
          }
     </style>

 </head>
  <body>  
      <h1 style="color:green;"> Map Visualization </h1>
      <div id="map"></div>


      <script>
         function getStateColor(stateShade){
             if (stateShade =="colored-state"){
                 return '#6666ff';
             }else if(stateShade!="non-colored-state"){
                 return '#D3D3D3';
             }       
         }

         function countriesStyle(feature){
             return {
                 fillColor : getStateColor(feature.properties.shade),
                 weight : 2,
                 opacity : 1,
                 color: 'white',
                 dashArray : 2.5,
                 fillOpacity :0.7
             }
         }

         var map = L.map('map').setView(\[80, 30\], 19)
         var countriesLayer = L.geoJson(
         countries,
         {style :  countriesStyle}
         ).addTo(map);
         map.fitBounds(countriesLayer.getBounds());  

         var point1 =\[44.066803,-93.533061\];
         var point2 = \[43.064,-89.5347\];

         var marker1 = L.marker(point1).addTo(map).bindPopup("<p>State: MN" );
         var marker2 = L.marker(point2).addTo(map).bindPopup("<p>State:WI" );

      </script> 
  </body> 

</html>][1]][1]
...