src/components/Map.svelte

   1
   2 <script>
   3   import * as L from 'leaflet';
   4   import 'leaflet-minimap';
   5   import 'leaflet/dist/leaflet.css';
   6   import 'leaflet-minimap/dist/Control.MiniMap.min.css';
   7
   8   import { get } from 'svelte/store';
   9   import { get_config_value } from '../lib/config_reader.js';
  10   import { map_store } from '../lib/stores.js';
  11   import MapPosition from '../components/MapPosition.svelte';
  12
  13   export let display_minimap = false;
  14   export let current_result = null;
  15   export let position_marker = null;
  16
  17   let dataLayers = [];
  18
  19   function createMap(container) {
  20     const attribution = get_config_value('Map_Tile_Attribution') || null;
  21     let map = new L.map(container, {
  22       attributionControl: (attribution && attribution.length),
  23       scrollWheelZoom: true, // !L.Browser.touch,
  24       touchZoom: false,
  25       center: [
  26         get_config_value('Map_Default_Lat'),
  27         get_config_value('Map_Default_Lon')
  28       ],
  29       zoom: get_config_value('Map_Default_Zoom')
  30     });
  31
  32     L.tileLayer(get_config_value('Map_Tile_URL'), {
  33       attribution: attribution
  34     }).addTo(map);
  35
  36     if (display_minimap) {
  37       let osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), {
  38         minZoom: 0,
  39         maxZoom: 13,
  40         attribution: attribution
  41       });
  42       new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
  43     }
  44
  45     const MapPositionControl = L.Control.extend({
  46       options: { position: 'topright' },
  47       onAdd: () => { return document.getElementById('show-map-position'); }
  48     });
  49     map.addControl(new MapPositionControl());
  50
  51     return map;
  52   }
  53
  54   function mapAction(container) {
  55     let map = createMap(container);
  56     map_store.set(map);
  57     setMapData(current_result);
  58
  59     return {
  60       destroy: () => {
  61         map_store.set(null);
  62         map.remove();
  63       }
  64     };
  65   }
  66
  67   function parse_and_normalize_geojson_string(part) {
  68     // normalize places the geometry into a featurecollection, similar to
  69     // https://github.com/mapbox/geojson-normalize
  70     var parsed_geojson = {
  71       type: 'FeatureCollection',
  72       features: [
  73         {
  74           type: 'Feature',
  75           geometry: part,
  76           properties: {}
  77         }
  78       ]
  79     };
  80     return parsed_geojson;
  81   }
  82
  83   function resetMapData() {
  84     let map = get(map_store);
  85     if (!map) { return; }
  86
  87     dataLayers.forEach(function (layer) {
  88       map.removeLayer(layer);
  89     });
  90   }
  91
  92   function setMapData(aFeature) {
  93     let map = get(map_store);
  94     if (!map) { return; }
  95
  96     resetMapData();
  97
  98     if (position_marker) {
  99       // We don't need a marker, but an L.circle instance changes radius once you zoom in/out
 100       let cm = L.circleMarker(
 101         position_marker,
 102         {
 103           radius: 5,
 104           weight: 2,
 105           fillColor: '#ff7800',
 106           color: 'red',
 107           opacity: 0.75,
 108           zIndexOffset: 100,
 109           clickable: false
 110         }
 111       );
 112       cm.addTo(map);
 113       dataLayers.push(cm);
 114     }
 115
 116     var search_params = new URLSearchParams(window.location.search);
 117     var viewbox = search_params.get('viewbox');
 118     if (viewbox) {
 119       let coords = viewbox.split(','); // <x1>,<y1>,<x2>,<y2>
 120       let bounds = L.latLngBounds([coords[1], coords[0]], [coords[3], coords[2]]);
 121       L.rectangle(bounds, {
 122         color: '#69d53e',
 123         weight: 3,
 124         dashArray: '5 5',
 125         opacity: 0.8,
 126         fill: false
 127       }).addTo(map);
 128     }
 129
 130     // nothing to do
 131     if (!aFeature) { return; }
 132
 133     let lat = aFeature.centroid ? aFeature.centroid.coordinates[1] : aFeature.lat;
 134     let lon = aFeature.centroid ? aFeature.centroid.coordinates[0] : aFeature.lon;
 135     let geojson = aFeature.geometry || aFeature.geojson;
 136
 137     if (lat && lon) {
 138       let circle = L.circleMarker([lat, lon], {
 139         radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75
 140       });
 141       map.addLayer(circle);
 142       dataLayers.push(circle);
 143     }
 144
 145
 146     if (geojson) {
 147       var geojson_layer = L.geoJson(
 148         // https://leafletjs.com/reference-1.0.3.html#path-option
 149         parse_and_normalize_geojson_string(geojson),
 150         {
 151           style: function () {
 152             return { interactive: false, color: 'blue' };
 153           }
 154         }
 155       );
 156       map.addLayer(geojson_layer);
 157       dataLayers.push(geojson_layer);
 158       map.fitBounds(geojson_layer.getBounds());
 159     } else if (lat && lon) {
 160       map.setView([lat, lon], 10);
 161     } else {
 162       map.fitWorld();
 163     }
 164   }
 165
 166   $: setMapData(current_result);
 167
 168   function show_map_position_click(e) {
 169     e.target.style.display = 'none';
 170     document.getElementById('map-position').style.display = 'block';
 171   }
 172 </script>
 173
 174 <MapPosition />
 175 <div id="map" use:mapAction />
 176 <div id="show-map-position" class="leaflet-bar btn btn-sm btn-outline-secondary"
 177       on:click|stopPropagation={show_map_position_click}
 178 >show map bounds</div>
 179
 180 <style>
 181   #map {
 182     height: 100%;
 183     background:#eee;
 184   }
 185
 186   .btn-outline-secondary {
 187     background-color: white;
 188   }
 189
 190   .btn-outline-secondary:hover {
 191     color: #111;
 192   }
 193
 194   @media (max-width: 768px) {
 195     #map {
 196       height: 300px;
 197     }
 198   }
 199
 200 </style>