From 2b86531d33de43cd46e71942a7ab79b9571fe2d6 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sun, 23 Feb 2020 01:59:24 +0100 Subject: A skeleton module for new Maps component, based on Leaflet library (#137) --- Module.md | 4 + build.gradle | 1 + kvision-modules/kvision-maps/build.gradle | 9 ++ .../kvision-maps/package.json.d/project.info | 3 + .../kotlin/pl/treksoft/kvision/KVManagerMaps.kt | 38 +++++++++ .../main/kotlin/pl/treksoft/kvision/maps/Maps.kt | 95 ++++++++++++++++++++++ settings.gradle | 1 + 7 files changed, 151 insertions(+) create mode 100644 kvision-modules/kvision-maps/build.gradle create mode 100644 kvision-modules/kvision-maps/package.json.d/project.info create mode 100644 kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/KVManagerMaps.kt create mode 100644 kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/maps/Maps.kt diff --git a/Module.md b/Module.md index 5b9cffb0..9e8aa403 100644 --- a/Module.md +++ b/Module.md @@ -114,6 +114,10 @@ Predictable state container based on Redux library. A set of components for creating multiplatform automatic JSON-RPC connectivity with a backend server. +# Package pl.treksoft.kvision.maps + +A maps component based on Leaflet library. + # Package pl.treksoft.kvision.moment A set of tools for parsing, validating, manipulating, and formatting dates based on Moment Library. diff --git a/build.gradle b/build.gradle index c0d156a6..4aa097c0 100644 --- a/build.gradle +++ b/build.gradle @@ -173,6 +173,7 @@ dokka { 'kvision-modules/kvision-fontawesome/src/main/kotlin', 'kvision-modules/kvision-redux/src/main/kotlin', 'kvision-modules/kvision-redux-kotlin/src/main/kotlin', + 'kvision-modules/kvision-maps/src/main/kotlin', 'kvision-modules/kvision-moment/src/main/kotlin', 'kvision-modules/kvision-tabulator/src/main/kotlin', 'kvision-modules/kvision-pace/src/main/kotlin', diff --git a/kvision-modules/kvision-maps/build.gradle b/kvision-modules/kvision-maps/build.gradle new file mode 100644 index 00000000..f87287f3 --- /dev/null +++ b/kvision-modules/kvision-maps/build.gradle @@ -0,0 +1,9 @@ +apply from: "../shared.gradle" + +kotlinFrontend { + + npm { + dependency("leaflet", "1.6.0") + } + +} diff --git a/kvision-modules/kvision-maps/package.json.d/project.info b/kvision-modules/kvision-maps/package.json.d/project.info new file mode 100644 index 00000000..d737fd1c --- /dev/null +++ b/kvision-modules/kvision-maps/package.json.d/project.info @@ -0,0 +1,3 @@ +{ + "description": "KVision maps module" +} diff --git a/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/KVManagerMaps.kt b/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/KVManagerMaps.kt new file mode 100644 index 00000000..5fb39d42 --- /dev/null +++ b/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/KVManagerMaps.kt @@ -0,0 +1,38 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package pl.treksoft.kvision + +internal val kVManagerMapsInit = KVManagerMaps.init() + +/** + * Internal singleton object which initializes and configures KVision Maps module. + */ +internal object KVManagerMaps { + + init { + require("leaflet/dist/leaflet.css") + } + + internal val leaflet = require("leaflet/dist/leaflet.js") + + internal fun init() {} +} diff --git a/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/maps/Maps.kt b/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/maps/Maps.kt new file mode 100644 index 00000000..cf68fd2e --- /dev/null +++ b/kvision-modules/kvision-maps/src/main/kotlin/pl/treksoft/kvision/maps/Maps.kt @@ -0,0 +1,95 @@ +/* + * Copyright (c) 2017-present Robert Jaros + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ +package pl.treksoft.kvision.maps + +import com.github.snabbdom.VNode +import org.w3c.dom.HTMLElement +import pl.treksoft.kvision.KVManagerMaps +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.utils.obj + +/** + * Maps component. + * + * @constructor + * @param lat initial latitude value + * @param lng initial longitude value + * @param zoom initial zoom + * @param classes a set of CSS class names + */ +open class Maps( + val lat: Number, + val lng: Number, + val zoom: Number, + classes: Set = setOf(), + init: (Maps.() -> Unit)? = null +) : Widget(classes) { + + var jsMaps: dynamic = null + + init { + @Suppress("LeakingThis") + init?.invoke(this) + } + + override fun afterInsert(node: VNode) { + createMaps() + } + + @Suppress("UnsafeCastFromDynamic") + protected fun createMaps() { + (this.getElement() as? HTMLElement)?.let { + jsMaps = KVManagerMaps.leaflet.map(it, obj { + this.center = arrayOf(lat, lng) + this.zoom = zoom + }) + KVManagerMaps.leaflet.tileLayer( + "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", + obj { + this.attribution = + "© OpenStreetMap contributors" + }).addTo(jsMaps) + } + } + + override fun afterDestroy() { + jsMaps?.remove() + } +} + +/** + * DSL builder extension function. + * + * It takes the same parameters as the constructor of the built component. + */ +fun Container.maps( + lat: Number, + lng: Number, + zoom: Number, + classes: Set = setOf(), + init: (Maps.() -> Unit)? = null +): Maps { + val maps = Maps(lat, lng, zoom, classes, init) + this.add(maps) + return maps +} diff --git a/settings.gradle b/settings.gradle index be1b7b75..8e111e06 100644 --- a/settings.gradle +++ b/settings.gradle @@ -23,6 +23,7 @@ include 'kvision-modules:kvision-base', 'kvision-modules:kvision-redux', 'kvision-modules:kvision-redux-kotlin', 'kvision-modules:kvision-tabulator', + 'kvision-modules:kvision-maps', 'kvision-modules:kvision-moment', 'kvision-modules:kvision-pace', 'kvision-modules:kvision-remote', -- cgit