#14 add line edition in leaflet in sandbox
nobohan
1 year 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%; |
||||
} |
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 696 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
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; |
||||