@chmap/geo-referencing

v1.0.4

Published

2 years ago

Users can import a iiif manifest file, then assign a geo-coordinate to image nodes by drag & drop on the leaflet map. Additionally, users can rotate, scale, and distort the shape of an image node for completing a simple geo-referencing.

Downloads

0High
0Medium
0Low

cyeh

yeh.cam

gis map leaflet

geo-referencing

Users can import a iiif manifest file and assign geo-coordinates or distort the shape of an image for the geo-referencing purpose.

Demos

example

Getting Started

Several quick start options are available:

Insert <script src="js/chmap-geo-referencing.js"></script> into the <head> tag.
Install with npm: npm install @chmap/geo-referencing
Install with yarn: yarn add @chmap/geo-referencing

Usage with the scrip tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>CHMap</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/chmap-geo-referencing.js"></script>
</head>
<body>
    <div id="map" />
</body>
</html>

You can extract components from the global variable, chmapGeoReferencing, such as:

const { GeoReferencingController } = window.chmapGeoReferencing;

const defaultLayer = L.tileLayer("https://stamen-tiles-a.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png",
    { attribution: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> â€” Map data Â© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tileset url:<span style="color:blue">https://stamen-tiles-a.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png</span>' });

const map = L.map("map", {
    center: [35, 108],
    attributionControl: false,
    zoom: 4,
    minZoom: 0,
    maxZoom: 16,
    layers: [defaultLayer],
});

GeoReferencingController.init(map);

Please browse all files under the example folder for more detail usage.

Building from the source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>CHMap</title>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div id="map" />
    <script src="js/index.js"></script>
</body>
</html>

import { GeoReferencingController } from "@chmap/geo-referencing";

const defaultLayer = L.tileLayer("https://stamen-tiles-a.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png",
    { attribution: '<a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> â€” Map data Â© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, Tileset url:<span style="color:blue">https://stamen-tiles-a.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.png</span>' });

const map = L.map("map", {
    center: [35, 108],
    attributionControl: false,
    zoom: 4,
    minZoom: 0,
    maxZoom: 16,
    layers: [defaultLayer],
});

GeoReferencingController.init(map);

License

Licensed under the GNU GPLv3 license.

Published

Vulnerabilities

Links

Maintainers

Keywords