search route / separated map factory and component

static/css/custom.css

@@ -20,15 +20,6 @@ body {
   padding: 5px;
 }
 
-#search-menu {
-  position: absolute;
-  top: 5%;
-  bottom: 5%;
-  left: 5%;
-  right: 5%;
-  z-index: 99999;
-}
-
 .mapserver-label-icon {
   margin-left: -100px !important;
   margin-top: -100px !important;

static/js/components/Map.js

@@ -0,0 +1,52 @@
+import wsChannel from '../WebSocketChannel.js';
+import layerManager from '../map/LayerManager.js';
+import { createMap } from '../map/MapFactory.js';
+
+export default {
+  view(vnode){
+    return m("div", { class: "full-screen" });
+  },
+
+  oncreate(vnode){
+
+    const map = createMap(
+      vnode.dom,
+      +vnode.attrs.layerId,
+      +vnode.attrs.zoom,
+      +vnode.attrs.lat,
+      +vnode.attrs.lon
+    );
+
+    vnode.state.map = map;
+
+    function updateHash(){
+      const center = map.getCenter();
+      const layerId = layerManager.getCurrentLayer().id;
+
+      m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`);
+    }
+
+    map.on('zoomend', updateHash);
+    map.on('moveend', updateHash);
+    map.on('baselayerchange', updateHash);
+  },
+
+  onbeforeupdate(newVnode, oldVnode) {
+    const center = newVnode.state.map.getCenter();
+    const newAattrs = newVnode.attrs;
+
+    return newAattrs.layerId != layerManager.getCurrentLayer().id ||
+      newAattrs.zoom != newVnode.state.map.getZoom() ||
+      Math.abs(newAattrs.lat - center.lat) > 0.1 ||
+      Math.abs(newAattrs.lat - center.lat) > 0.1;
+  },
+
+  onupdate(vnode){
+    layerManager.switchLayer(+vnode.attrs.layerId);
+    vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
+  },
+
+  onremove(vnode){
+    vnode.state.map.remove();
+  }
+}

static/js/components/Search.js

@@ -0,0 +1,6 @@
+
+export default {
+  view(vnode){
+    return m("div", vnode.attrs.query)
+  }
+}

static/js/components/SearchInput.js

@@ -0,0 +1,38 @@
+
+const state = {
+  query: ""
+}
+
+function doSearch(){
+  m.route.set(`/search/${state.query}`);
+}
+
+export default {
+  view: function(){
+
+    function handleInput(e){
+      state.query = e.target.value;
+    }
+
+    function handleKeyDown(e){
+      if (e.keyCode == 13){
+        doSearch();
+      }
+    }
+
+    return m("div", { class: "input-group mb-3" }, [
+      m("input[type=text]", {
+        placeholder: "Search",
+        class: "form-control",
+        oninput: handleInput,
+        onkeydown: handleKeyDown,
+        value: state.query
+      }),
+      m("div", { class: "input-group-append", onclick: doSearch }, [
+        m("span", { class: "input-group-text" }, [
+          m("i", { class: "fa fa-search"})
+        ])
+      ])
+    ]);
+  }
+};

static/js/map/MapComponent.js

@@ -1,79 +0,0 @@
-import wsChannel from '../WebSocketChannel.js';
-import SimpleCRS from './SimpleCRS.js';
-import CoordinatesDisplay from './CoordinatesDisplay.js';
-import WorldInfoDisplay from './WorldInfoDisplay.js';
-import SearchControl from './SearchControl.js';
-import Overlaysetup from './Overlaysetup.js';
-import CustomOverlay from './CustomOverlay.js';
-import layerManager from './LayerManager.js';
-import config from '../config.js';
-
-export default {
-  view(vnode){
-    return m("div", { class: "full-screen" });
-  },
-
-  oncreate(vnode){
-    const cfg = config.get();
-
-    var map = L.map(vnode.dom, {
-      minZoom: 2,
-      maxZoom: 12,
-      center: [+vnode.attrs.lat, +vnode.attrs.lon],
-      zoom: +vnode.attrs.zoom,
-      crs: SimpleCRS
-    });
-
-    vnode.state.map = map;
-
-    map.attributionControl.addAttribution('<a href="https://github.com/minetest-tools/mapserver">Minetest Mapserver</a>');
-
-    var overlays = {};
-
-    layerManager.setup(wsChannel, cfg.layers, map, +vnode.attrs.layerId);
-
-    //All overlays
-    Overlaysetup(cfg, map, overlays, wsChannel, layerManager);
-    CustomOverlay(map, overlays);
-
-    new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
-    new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
-
-    if (cfg.enablesearch){
-      new SearchControl(wsChannel, { position: 'topright' }).addTo(map);
-    }
-
-    //layer control
-    L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map);
-
-    function updateHash(){
-      const center = map.getCenter();
-      const layerId = layerManager.getCurrentLayer().id;
-
-      m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`);
-    }
-
-    map.on('zoomend', updateHash);
-    map.on('moveend', updateHash);
-    map.on('baselayerchange', updateHash);
-  },
-
-  onbeforeupdate(newVnode, oldVnode) {
-    const center = newVnode.state.map.getCenter();
-    const newAattrs = newVnode.attrs;
-
-    return newAattrs.layerId != layerManager.getCurrentLayer().id ||
-      newAattrs.zoom != newVnode.state.map.getZoom() ||
-      Math.abs(newAattrs.lat - center.lat) > 0.1 ||
-      Math.abs(newAattrs.lat - center.lat) > 0.1;
-  },
-
-  onupdate(vnode){
-    layerManager.switchLayer(+vnode.attrs.layerId);
-    vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
-  },
-
-  onremove(vnode){
-    vnode.state.map.remove();
-  }
-}

static/js/map/MapFactory.js

@@ -0,0 +1,45 @@
+import wsChannel from '../WebSocketChannel.js';
+import SimpleCRS from './SimpleCRS.js';
+import CoordinatesDisplay from './CoordinatesDisplay.js';
+import WorldInfoDisplay from './WorldInfoDisplay.js';
+import SearchControl from './SearchControl.js';
+import Overlaysetup from './Overlaysetup.js';
+import CustomOverlay from './CustomOverlay.js';
+import layerManager from './LayerManager.js';
+import config from '../config.js';
+
+
+export function createMap(node, layerId, zoom, lat, lon){
+
+  const cfg = config.get();
+
+  const map = L.map(node, {
+    minZoom: 2,
+    maxZoom: 12,
+    center: [lat, lon],
+    zoom: zoom,
+    crs: SimpleCRS
+  });
+
+  map.attributionControl.addAttribution('<a href="https://github.com/minetest-tools/mapserver">Minetest Mapserver</a>');
+
+  var overlays = {};
+
+  layerManager.setup(wsChannel, cfg.layers, map, layerId);
+
+  //All overlays
+  Overlaysetup(cfg, map, overlays, wsChannel, layerManager);
+  CustomOverlay(map, overlays);
+
+  new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
+  new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map);
+
+  if (cfg.enablesearch){
+    new SearchControl(wsChannel, { position: 'topright' }).addTo(map);
+  }
+
+  //layer control
+  L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map);
+
+  return map;
+}

static/js/map/SearchControl.js

@@ -1,5 +1,4 @@
-import SearchMenu from '../search/SearchMenu.js';
+import SearchInput from '../components/SearchInput.js';
-import SearchInput from '../search/SearchInput.js';
 
 export default L.Control.extend({
     initialize: function(wsChannel, opts) {
@@ -9,10 +8,6 @@ export default L.Control.extend({
     onAdd: function(map) {
       var div = L.DomUtil.create('div');
       m.mount(div, SearchInput);
-      m.mount(document.getElementById("search-content"), {
-        view: () => m(SearchMenu, {map: map})
-      });
-
       return div;
     }
 });

static/js/routes.js

@@ -1,5 +1,6 @@
 
-import MapComponent from './map/MapComponent.js';
+import Map from './components/Map.js';
+import Search from './components/Search.js';
 
 var Home = {
     view: function() {
@@ -9,5 +10,6 @@ var Home = {
 
 export default {
   "/": Home,
-  "/map/:layerId/:zoom/:lon/:lat": MapComponent
+  "/map/:layerId/:zoom/:lon/:lat": Map,
+  "/search/:query": Search
 }