#14 add line edition in leaflet in sandbox
nobohan
2 years ago
parent
cdf6e4ac45
commit
07e76fa6a8
@ -0,0 +1,3 @@
|
||||
How to draw lines and polygons in Leaflet: sandbox for testing
|
||||
=================================
|
||||
|
||||
@ -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: '© <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>
|
||||
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
.lvimrc
|
||||
@ -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
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "6.9"
|
||||
@ -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.
|
||||
@ -0,0 +1,162 @@
|
||||
# Proj4Leaflet [](http://badge.fury.io/js/proj4leaflet) [](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);
|
||||
```
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
@ -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 © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
||||
mqTilesAttr = 'Tiles © <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);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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 = "© 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);
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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 © 2012',
|
||||
tilelayer = new L.TileLayer(tileUrl, {
|
||||
maxZoom: 12,
|
||||
minZoom: 0,
|
||||
attribution: attrib,
|
||||
});
|
||||
|
||||
map.addLayer(tilelayer);
|
||||
map.setView([-36.852931, 174.762057], 10);
|
||||
@ -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 © 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);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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 © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © <a href="http://www.kartena.se/">Kartena</a>'
|
||||
}).addTo(map);
|
||||
|
||||
map.setView([57.704, 11.965], 13);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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: '© 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);
|
||||
@ -0,0 +1,10 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -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>
|
||||
@ -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: '© <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);
|
||||
@ -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
@ -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;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none | ||||