#14 add line edition in leaflet in sandbox

This commit is contained in:
nobohan 2021-08-25 10:15:16 +02:00
parent cdf6e4ac45
commit 07e76fa6a8
61 changed files with 34775 additions and 14 deletions

View File

@ -0,0 +1,3 @@
How to draw lines and polygons in Leaflet: sandbox for testing
=================================

View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html style="height:100%;margin:0;padding:0;">
<head>
<title>Tests edit line - polygon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="./leaflet/leaflet-hash.js"></script>
<style type="text/css">
.leaflet-tile-container { pointer-events: auto; }
</style>
</head>
<body style="height:100%;margin:0;padding:0;">
<div id="map" style="height:100%"></div>
<script>
const map = L.map('map').setView([50.5, 5.57], 10);
const cyclosm = L.tileLayer('https://{s}.tiles.champs-libres.be/cyclosm/{z}/{x}/{y}.png', {
subdomains: "abc",
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 20
});
map.addLayer(cyclosm);
const hash = L.hash(map);
let geometryType = 'LINESTRING'; //'POINT' | 'LINESTRING' | 'POLYGON'
let myMarker = null;
let polyline = null;
let previousPolyline = null;
let previousLayerPoint = null;
const lineDraw = L.polyline([], {color: '#11aa9e', dashArray: '6', lineCap: 'butt'}).addTo(map);
const pointDistance = (pointA, pointB) => {
const SNAP_DISTANCE = 6;
let distancePixel = Math.sqrt(Math.abs((pointB.x - pointA.x)**2 - (pointB.y - pointA.y)**2));
return distancePixel < SNAP_DISTANCE;
};
const arePointsSnapped = (previousPoint, currentPoint) =>
(previousPoint && currentPoint) ? pointDistance(previousPoint, currentPoint) : false;
switch(geometryType){
case 'LINESTRING':
map.on('mousemove', (e) => {
if(polyline){
let lastDrawPoint = polyline.getLatLngs()[polyline.getLatLngs().length - 1];
lineDraw.setLatLngs([lastDrawPoint, e.latlng]);
}
});
break;
}
map.on('click', (e) => {
console.log(e);
switch(geometryType){
case 'POINT':
default:
if (myMarker !== null) {
map.removeLayer(myMarker);
}
myMarker = L.marker(e.latlng).addTo(map);
case 'LINESTRING':
lineDraw.setLatLngs([]);
if (polyline === null){
console.log(previousPolyline)
if (previousPolyline !== null){
map.removeLayer(previousPolyline);
}
polyline = L.polyline([e.latlng], {color: '#11aa9e'}).addTo(map);
} else {
if (arePointsSnapped(previousLayerPoint, e.layerPoint)) {
console.log('reset line')
previousPolyline = polyline;
polyline.setStyle({color: '#60b15c'});
polyline = null;
} else {
polyline.addLatLng(e.latlng);
previousLayerPoint = e.layerPoint;
}
}
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,2 @@
node_modules
.lvimrc

View File

@ -0,0 +1,55 @@
{
/*
* ENVIRONMENTS
* =================
*/
// Define globals exposed by modern browsers.
"browser": true,
// Define globals exposed by jQuery.
"jquery": true,
"globals": {"L": false, "proj4": false},
/*
* ENFORCING OPTIONS
* =================
*/
// Force all variable names to use either camelCase style or UPPER_CASE
// with underscores.
"camelcase": true,
// Prohibit use of == and != in favor of === and !==.
"eqeqeq": true,
// Suppress warnings about == null comparisons.
"eqnull": true,
// Enforce tab width of 2 spaces.
"indent": 2,
"smarttabs": true,
// Prohibit use of a variable before it is defined.
"latedef": true,
// Require capitalized names for constructor functions.
"newcap": true,
// Enforce use of single quotation marks for strings.
"quotmark": "single",
// Prohibit trailing whitespace.
"trailing": true,
// Prohibit use of explicitly undeclared variables.
"undef": true,
// Warn when variables are defined but never used.
"unused": true,
// All loops and conditionals should have braces.
"curly": true
}

View File

@ -0,0 +1,3 @@
language: node_js
node_js:
- "6.9"

View File

@ -0,0 +1,22 @@
Copyright (c) 2012, Kartena AB
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

View File

@ -0,0 +1,162 @@
# Proj4Leaflet [![NPM version](https://badge.fury.io/js/proj4leaflet.png)](http://badge.fury.io/js/proj4leaflet) [![Build Status](https://travis-ci.org/kartena/Proj4Leaflet.svg?branch=master)](https://travis-ci.org/kartena/Proj4Leaflet)
This [Leaflet](http://leafletjs.com) plugin adds support for using projections supported by
[Proj4js](https://github.com/proj4js/proj4js).
_Proj4Leaflet uses Leaflet 1.0.3, for compatibility with Leaflet 0.7.x use the [0.7.2](https://github.com/kartena/Proj4Leaflet/releases/tag/0.7.2) release._
Leaflet comes with built in support for tiles in [Spherical Mercator](http://wiki.openstreetmap.org/wiki/EPSG:3857) and [a few other projections](http://leafletjs.com/reference-1.0.0.html#crs-l-crs-epsg3395).
If you need support for tile layers in other projections, the Proj4Leaflet plugin lets you use tiles in any projection
supported by Proj4js, which means support for just about any projection commonly used.
Proj4Leaflet also adds support for GeoJSON in any projection, while Leaflet by itself assumes GeoJSON to always
use WGS84 as its projection.
Image overlays with bounds set from projected coordinates rather than `LatLng`s are also supported by Proj4Leaflet plugin.
For more details, see this blog post on [tiling and projections](http://blog.kartena.se/local-projections-in-a-world-of-spherical-mercator/).
## Usage
Common use means making a new CRS instance for the projection you want to use.
```javascript
// RT90 with map's pixel origin at RT90 coordinate (0, 0)
var crs = new L.Proj.CRS('EPSG:2400',
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
{
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
}
);
var map = L.map('map', {
crs: crs,
continuousWorld: true,
worldCopyJump: false
});
L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);
```
Using options when constructing the CRS, you can set the tile set's origin.
```javascript
// SWEREF 99 TM with map's pixel origin at (218128.7031, 6126002.9379)
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
origin: [218128.7031, 6126002.9379],
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
}
);
```
## Proj4js compatibility notice
Proj4js has breaking changes introduced after version 1.1.0. The current version of Proj4Leaflet
uses Proj4js 2.3.14 or later. If you for some reason need Proj4js version 1.1.0 compatibility, you can
still use Proj4Leaflet [version 0.5](https://github.com/kartena/Proj4Leaflet/tree/0.5).
## API
The plugin extends Leaflet with a few classes that helps integrating Proj4's projections into
Leaflet's [CRS](http://leafletjs.com/reference-1.0.0.html#crs) abstract class.
### L.Proj.CRS
A CRS implementation that uses a Proj4 definition for the projection.
This is likely to be the only class you need to work with in Proj4Leaflet.
#### Usage example
```javascript
var map = L.map('map', {
center: [57.74, 11.94],
zoom: 13,
crs: L.Proj.CRS('EPSG:2400',
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
{
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
}
),
continuousWorld: true,
worldCopyJump: false
});
```
#### Constructor
```javascript
L.Proj.CRS(code, proj4def, options)
```
* `code` is the projection's SRS code (only used internally by the Proj4js library)
* `proj4def` is the Proj4 definition string for the projection to use
* `options` is an options object with these possible parameters:
* `origin` - the projected coordinate to use as the map's pixel origin; overrides the `transformation` option if set
* `transformation` - an [L.Transformation](http://leafletjs.com/reference-1.0.0.html#transformation) that is used
to transform the projected coordinates to pixel coordinates; default is `L.Transformation(1, 0, -1, 0)`
* `scales` - an array of scales (pixels per projected coordinate unit) for each corresponding zoom level;
default is to use Leaflet's native scales. You should use `scales` _or_ `resolutions`, not both.
* `resolutions` - an array of resolutions (projected coordinate units per pixel) for each corresponding zoom level;
default is to use Leaflet's native resolutions. You should use `scales` _or_ `resolutions`, not both.
* `bounds` - an [L.Bounds](http://leafletjs.com/reference-1.0.0.html#bounds) providing the bounds of CRS in projected
coordinates. If defined, Proj4Leaflet will use this in the `getSize` method, otherwise reverting to Leaflet's
default size for Spherical Mercator.
### L.Proj.GeoJSON
Extends [L.GeoJSON](http://leafletjs.com/reference-1.0.0.html#geojson) to add CRS support. Unlike the TileLayer extension, the
CRS is derived from the `name` property of a `crs` defined directly on the GeoJSON object per [the spec](http://www.geojson.org/geojson-spec.html#named-crs).
Linked CRSs are not supported.
**Note:** The relevant Proj4 definition should be defined directly via `proj4.defs` before loading the GeoJSON object.
If it is not, Proj4leaflet will throw an error.
Also, note that future versions of the GeoJSON spec may not include explicit CRS support. See https://github.com/GeoJSONWG/draft-geojson/pull/6 for more information.
#### Usage Example
```javascript
proj4.defs("urn:ogc:def:crs:EPSG::26915", "+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
var geojson = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [481650, 4980105]
},
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:EPSG::26915"
}
}
};
var map = L.map('map');
L.Proj.geoJson(geojson).addTo(map);
```
### L.Proj.ImageOverlay
Works like [L.ImageOverlay](http://leafletjs.com/reference-1.0.0.html#imageoverlay), but accepts bounds in the map's
projected coordinate system instead of latitudes and longitudes. This is useful when the projected coordinate systems
axis do not align with the latitudes and longitudes, which results in distortion with the default image overlay in Leaflet.
#### Usage Example
```javascript
// Coordinate system is EPSG:28992 / Amersfoort / RD New
var imageBounds = L.bounds(
[145323.20011251318, 475418.56045463786],
[175428.80013969325, 499072.9604685671]
);
L.Proj.imageOverlay('http://geo.flevoland.nl/arcgis/rest/services/Groen_Natuur/Agrarische_Natuur/MapServer/export?' +
'format=png24&transparent=true&f=image&bboxSR=28992&imageSR=28992&layers=show%3A0' +
'&bbox=145323.20011251318%2C475418.56045463786%2C175428.80013969325%2C499072.9604685671&size=560%2C440',
imageBounds);
```

View File

@ -0,0 +1,53 @@
{
"name": "Proj4Leaflet",
"version": "1.0.1",
"homepage": "https://github.com/kartena/Proj4Leaflet",
"authors": [
"Per Liedman <per.liedman@kartena.se> (https://github.com/perliedman/)",
"Peter Thorin (https://github.com/pthorin/)",
"Semone Kallin Thander (https://github.com/semone/)",
"S. Andrew Sheppard (https://github.com/sheppard)",
"Leigh Hunt (https://github.com/leighghunt/)",
"Andris Nolendorfs (https://github.com/theashyster)",
"Vladimir Agafonkin (https://github.com/mourner)",
"Juuso Lehtinen (https://github.com/jleh)",
"Mattias Bengtsson (https://github.com/moonlite/)",
"Denis Rykov (http://github.com/drnextgis) ",
"Jose manuel Vivó Arnal (Chema) (http://github.com/jmvivo) ",
"Daniel Garcia (http://github.com/keyjote) ",
"Mathieu Leplatre (https://github.com/leplatrem)",
"Benny Lichtner (http://github.com/bennlich) ",
"Christopher Fredén (https://github.com/icetan/)",
"dpzaba (http://github.com/dpzaba) ",
"Edward Mac Gillavry (http://github.com/emacgillavry) ",
"Emil Goude (http://github.com/Stockholmsnovis) ",
"Simon Legner (http://github.com/simon04) ",
"Tom Blackmore (http://github.com/tablackmore) ",
"Fabien NICOLLET (https://github.com/fnicollet)"
],
"description": "Smooth Proj4js integration with Leaflet",
"moduleType": [
"amd",
"node"
],
"main": [
"src/proj4leaflet.js"
],
"keywords": [
"Leaflet",
"Project4"
],
"license": "BSD-2-Clause",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"lib",
"examples",
"tests"
],
"dependencies": {
"proj4": "^2.3.14"
}
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,41 @@
var map = L.map('map').setView([44.97,-93.24], 11);
// MapQuest OSM Tiles
// Attribution (https://gist.github.com/mourner/1804938)
var osmAttr = 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
mqTilesAttr = 'Tiles &copy; <a href="https://www.mapquest.com/"" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png" />';
L.tileLayer(
'https://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
{
attribution: 'Data by <a href="https://openstreetmap.org">OpenStreetMap contributors</a>'
}
)
.addTo(map);
// GeoJSON layer (UTM15)
proj4.defs('EPSG:26915', '+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs');
var geojson = {
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [481650, 4980105],
},
'properties': {
'name': 'University of Minnesota'
},
'crs': {
'type': 'name',
'properties': {
'name': 'urn:ogc:def:crs:EPSG::26915'
}
}
};
L.Proj.geoJson(geojson, {
'pointToLayer': function(feature, latlng) {
return L.marker(latlng).bindPopup(feature.properties.name);
}
}).addTo(map);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,20 @@
var crs = new L.Proj.CRS('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs', {
resolutions: [21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094,
338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335,
5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.16536491406316148],
origin: [-2500000, 9045984]
}
);
var map = L.map('map', {
crs: crs,
center: [60, 10],
zoom: 14
});
L.tileLayer('https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBasis/MapServer/tile/{z}/{y}/{x}').addTo(map);
L.Proj.imageOverlay('https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheGraatone/MapServer/export' +
'?bbox=220461.84450009145,6661489.40861154,222115.49415195954,6662415.4521056535' +
'&size=1250,700&dpi=96&format=png24&transparent=true&bboxSR=25833&imageSR=25833&f=image',
L.bounds([220461.84450009145, 6661489.40861154], [222115.49415195954, 6662415.4521056535])).addTo(map);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="../../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../../lib/leaflet/leaflet.js"></script>
<script src="../../../lib/proj4-compressed.js"></script>
<script src="../../../src/proj4leaflet.js"></script>
<script src="script_austria.js"></script>
</body>
</html>

View File

@ -0,0 +1,36 @@
var crs31258 = new L.Proj.CRS('EPSG::31258',
"+proj=tmerc +lat_0=0 +lon_0=13.33333333333333 +k=1 +x_0=450000 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs",
{
origin: [-5172500.0, 5001000.0],
resolutions: [
400.00079375158754,
200.000529167725,
100.0002645838625,
50,
25,
15.000052916772502,
9.9999470832275,
5.000105833545001,
3.0001164168995005,
2.5000529167725003,
1.9999894166455001,
1.4999259165184997,
1.0001270002540006,
0.5000635001270003,
0.25003175006350015],
});
var map = L.map('map', {
crs: crs31258,
});
var attrib = "&copy KAGIS http://www.kagis.ktn.gv.at";
var basemap = new L.TileLayer("http://gis.ktn.gv.at/arcgis/rest/services/tilecache/Ortho_2010_2012/MapServer/tile/{z}/{y}/{x}", {
tileSize: 512,
maxZoom: 14,
minZoom: 0,
attribution: attrib
});
map.addLayer(basemap);
map.setView([46.66411, 14.63602], 12);

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="../../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../../lib/leaflet/leaflet.js"></script>
<script src="../../../lib/proj4-compressed.js"></script>
<script src="../../../src/proj4leaflet.js"></script>
<script src="script_auckland.js"></script>
</body>
</html>

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="../../../lib/proj4-compressed.js"></script>
<script src="../../../src/proj4leaflet.js"></script>
<script src="script_wellington.js"></script>
</body>
</html>

View File

@ -0,0 +1,35 @@
var crs = new L.Proj.CRS('EPSG:2193',
'+proj=tmerc +lat_0=0 +lon_0=173 +k=0.9996 +x_0=1600000 +y_0=10000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
origin: [1565000, 6150000],
resolutions: [
264.583862501058,
201.083735500804,
132.291931250529,
66.1459656252646,
26.4583862501058,
13.2291931250529,
6.61459656252646,
3.96875793751588,
2.11667090000847,
1.32291931250529,
0.661459656252646,
0.264583862501058,
0.132291931250529
]
});
var map = new L.Map('map', {
crs: crs,
});
var tileUrl = 'https://maps.aucklandcouncil.govt.nz/ArcGIS/rest/services/Aerials/MapServer/tile/{z}/{y}/{x}',
attrib = 'Auckland City Council &copy; 2012',
tilelayer = new L.TileLayer(tileUrl, {
maxZoom: 12,
minZoom: 0,
attribution: attrib,
});
map.addLayer(tilelayer);
map.setView([-36.852931, 174.762057], 10);

View File

@ -0,0 +1,45 @@
var crs = new L.Proj.CRS('EPSG:2193',
'+proj=tmerc +lat_0=0 +lon_0=173 +k=0.9996 +x_0=1600000 +y_0=10000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
origin: [-5099531.19635, 57089446.18],
resolutions: [
66.1459656252646,
33.0729828126323,
16.933367200067735,
8.466683600033868,
4.233341800016934,
2.116670900008467,
1.0583354500042335,
0.5291677250021167,
0.26458386250105836,
0.13229193125052918,
0.06614596562526459
]
});
var map = new L.Map('map', {
crs: crs,
continuousWorld: true,
worldCopyJump: false
});
/*
Wellington City Council's GIS web services are available under the following terms and conditions:
https://wellington.govt.nz/about-wellington/maps/gis-data-terms-and-conditions
Aerial Imagery: Creative Commons Attribution 3.0 New Zealand Licence, https://creativecommons.org/licenses/by/3.0/nz/
Additional services listed at https://wellington.govt.nz/~/media/maps/gis/ogc-services-list.pdf
*/
var tileUrl = 'https://gis.wcc.govt.nz/arcgis/rest/services/Basemap/Aerial_Photo/MapServer/tile/{z}/{y}/{x}',
attrib = 'Wellington City Council &copy; 2012',
tilelayer = new L.TileLayer(tileUrl, {
maxZoom: 10,
minZoom: 0,
continuousWorld: true,
attribution: attrib,
tileSize: 512
});
map.addLayer(tilelayer);
map.setView([-41.288889, 174.777222], 5);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,21 @@
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5
],
origin: [0, 0],
bounds: L.bounds([218128.7031, 6126002.9379], [1083427.2970, 7692850.9468])
}),
map = new L.Map('map', {
crs: crs,
});
L.tileLayer('https://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
maxZoom: 14,
minZoom: 0,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery &copy; <a href="http://www.kartena.se/">Kartena</a>'
}).addTo(map);
map.setView([57.704, 11.965], 13);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,27 @@
var crs = new L.Proj.CRS('EPSG:5181',
'+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25],
origin: [-30000, -60000],
bounds: L.bounds([-30000, -60000], [494288, 464288])
}),
map = L.map('map', {
crs: crs,
continuousWorld: true,
worldCopyJump: false,
});
new L.TileLayer('http://i{s}.maps.daum-img.net/map/image/G03/i/1.20/L{z}/{y}/{x}.png', {
maxZoom: 14,
minZoom: 0,
zoomReverse: true,
subdomains: '0123',
continuousWorld: true,
attribution: 'ⓒ Daum',
tms: true
}).addTo(map);
//Gunsan Airport
new L.marker([35.925937, 126.615810]).addTo(map);
map.setView([36.0, 127.0], 0);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,22 @@
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
8192, 4096, 2048, 1024, 512, 256, 128,
64, 32, 16, 8, 4, 2, 1, 0.5
],
origin: [0, 0]
}),
map = new L.Map('map', {
crs: crs,
});
L.tileLayer.wms('https://geodatatest.havochvatten.se/geoservices/ows', {
layers: 'hav-bakgrundskartor:hav-grundkarta',
format: 'image/png',
maxZoom: 14,
minZoom: 0,
attribution: '&copy; OpenStreetMap contributors <a href="https://www.havochvatten.se/kunskap-om-vara-vatten/kartor-och-geografisk-information/karttjanster.html">Havs- och vattenmyndigheten (Swedish Agency for Marine and Water Management)</a>'
}).addTo(map);
map.setView([55.8, 14.3], 3);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="../../lib/leaflet/leaflet.js"></script>
<script src="../../lib/proj4-compressed.js"></script>
<script src="../../src/proj4leaflet.js"></script>
<script src="script.js"></script>
</body>
</html>

View File

@ -0,0 +1,30 @@
/*
Example using Sweden Lantmäteriet Topografisk Webbkarta
https://opendata.lantmateriet.se/#apis
*/
/*** INSERT YOUR LANTMÄTERIET API TOKEN BELOW ***/
var token = '';
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8
],
origin: [-1200000.000000, 8500000.000000 ],
bounds: L.bounds( [-1200000.000000, 8500000.000000], [4305696.000000, 2994304.000000])
}),
map = new L.Map('map', {
crs: crs,
continuousWorld: true,
});
new L.TileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/'+ token +'/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&STYLE=default&TILEMATRIXSET=3006&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng', {
maxZoom: 9,
minZoom: 0,
continuousWorld: true,
attribution: '&copy; <a href="https://www.lantmateriet.se/en/">Lantmäteriet</a> Topografisk Webbkarta Visning, CCB',
}).addTo(map);
//Set view over Stockholm Södermalm
map.setView([59.3167, 18.0667], 7);

View File

@ -0,0 +1,10 @@
html, body {
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,624 @@
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
max-width: none !important;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane { z-index: 400; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane { z-index: 500; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-tooltip-pane { z-index: 650; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg { z-index: 200; }
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-tile {
will-change: opacity;
}
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline: 0;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-container a.leaflet-active {
outline: 2px solid orange;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255,255,255,0.5);
}
/* general typography */
.leaflet-container {
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
}
.leaflet-bar a,
.leaflet-bar a:hover {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px 'Lucida Console', Monaco, monospace;
text-indent: 1px;
}
.leaflet-control-zoom-out {
font-size: 20px;
}
.leaflet-touch .leaflet-control-zoom-in {
font-size: 22px;
}
.leaflet-touch .leaflet-control-zoom-out {
font-size: 24px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path {
background-image: url(images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.7);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover {
text-decoration: underline;
}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
font-size: 11px;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
background: rgba(255, 255, 255, 0.5);
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
}
.leaflet-popup-content p {
margin: 18px 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
border: none;
text-align: center;
width: 18px;
height: 14px;