import 'leaflet-minimap/dist/Control.MiniMap.min.css';
import { get } from 'svelte/store';
- import { get_config_value } from '../lib/config_reader.js';
- import { map_store, current_result_store, current_request_latlon } from '../lib/stores.js';
+ import { map_store } from '../lib/stores.js';
import MapPosition from '../components/MapPosition.svelte';
export let display_minimap = false;
+ export let current_result = null;
+ export let position_marker = null;
let dataLayers = [];
function createMap(container) {
- const attribution = get_config_value('Map_Tile_Attribution') || null;
+ const attribution = Nominatim_Config.Map_Tile_Attribution;
let map = new L.map(container, {
attributionControl: (attribution && attribution.length),
scrollWheelZoom: true, // !L.Browser.touch,
touchZoom: false,
center: [
- get_config_value('Map_Default_Lat'),
- get_config_value('Map_Default_Lon')
+ Nominatim_Config.Map_Default_Lat,
+ Nominatim_Config.Map_Default_Lon
],
- zoom: get_config_value('Map_Default_Zoom')
+ zoom: Nominatim_Config.Map_Default_Zoom
});
- L.tileLayer(get_config_value('Map_Tile_URL'), {
+ L.tileLayer(Nominatim_Config.Map_Tile_URL, {
attribution: attribution
}).addTo(map);
if (display_minimap) {
- let osm2 = new L.TileLayer(get_config_value('Map_Tile_URL'), {
+ let osm2 = new L.TileLayer(Nominatim_Config.Map_Tile_URL, {
minZoom: 0,
maxZoom: 13,
attribution: attribution
function mapAction(container) {
let map = createMap(container);
map_store.set(map);
- setMapData(get(current_result_store));
+ setMapData(current_result);
return {
- destroy: () => { map.remove(); }
+ destroy: () => {
+ map_store.set(null);
+ map.remove();
+ }
};
}
resetMapData();
- let request_latlon = get(current_request_latlon);
- if (request_latlon) {
- // We don't need a marker, but an L.circle instance changes radius once you zoom in/out
+ if (position_marker) {
+ // We don't need a marker, but L.circle would change radius when you zoom in/out
let cm = L.circleMarker(
- request_latlon,
+ position_marker,
{
radius: 5,
weight: 2,
clickable: false
}
);
+ cm.bindTooltip(`Search (${position_marker[0]},${position_marker[1]})`).openTooltip();
cm.addTo(map);
dataLayers.push(cm);
}
}).addTo(map);
}
- // nothing to do
- if (!aFeature) { return; }
+ if (!aFeature) return;
let lat = aFeature.centroid ? aFeature.centroid.coordinates[1] : aFeature.lat;
let lon = aFeature.centroid ? aFeature.centroid.coordinates[0] : aFeature.lon;
let circle = L.circleMarker([lat, lon], {
radius: 10, weight: 2, fillColor: '#ff7800', color: 'blue', opacity: 0.75
});
+ if (position_marker) { // reverse result
+ circle.bindTooltip('Result').openTooltip();
+ }
map.addLayer(circle);
dataLayers.push(circle);
}
if (geojson) {
var geojson_layer = L.geoJson(
- // https://leafletjs.com/reference-1.0.3.html#path-option
+ // https://leafletjs.com/reference-1.7.1.html#path-option
parse_and_normalize_geojson_string(geojson),
{
style: function () {
map.addLayer(geojson_layer);
dataLayers.push(geojson_layer);
map.fitBounds(geojson_layer.getBounds());
+ } else if (lat && lon && position_marker) {
+ map.fitBounds([[lat, lon], position_marker], { padding: [50, 50] });
} else if (lat && lon) {
map.setView([lat, lon], 10);
- } else {
- map.fitWorld();
}
}
- current_result_store.subscribe(aFeature => {
- setMapData(aFeature);
- });
-
+ $: setMapData(current_result);
function show_map_position_click(e) {
e.target.style.display = 'none';
}
}
-</style>
\ No newline at end of file
+</style>