#14 add line edition in leaflet in sandbox
3
sandbox/lines-polygons/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
How to draw lines and polygons in Leaflet: sandbox for testing
|
||||
=================================
|
||||
|
91
sandbox/lines-polygons/index.html
Normal file
@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html style="height:100%;margin:0;padding:0;">
|
||||
<head>
|
||||
<title>Tests edit line - polygon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script src="./leaflet/leaflet-hash.js"></script>
|
||||
<style type="text/css">
|
||||
.leaflet-tile-container { pointer-events: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:100%;margin:0;padding:0;">
|
||||
<div id="map" style="height:100%"></div>
|
||||
<script>
|
||||
const map = L.map('map').setView([50.5, 5.57], 10);
|
||||
|
||||
const cyclosm = L.tileLayer('https://{s}.tiles.champs-libres.be/cyclosm/{z}/{x}/{y}.png', {
|
||||
subdomains: "abc",
|
||||
attribution: '© <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>
|
2
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
.lvimrc
|
55
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/.jshintrc
Normal file
@ -0,0 +1,55 @@
|
||||
{
|
||||
/*
|
||||
* ENVIRONMENTS
|
||||
* =================
|
||||
*/
|
||||
|
||||
// Define globals exposed by modern browsers.
|
||||
"browser": true,
|
||||
|
||||
// Define globals exposed by jQuery.
|
||||
"jquery": true,
|
||||
|
||||
"globals": {"L": false, "proj4": false},
|
||||
|
||||
/*
|
||||
* ENFORCING OPTIONS
|
||||
* =================
|
||||
*/
|
||||
|
||||
// Force all variable names to use either camelCase style or UPPER_CASE
|
||||
// with underscores.
|
||||
"camelcase": true,
|
||||
|
||||
// Prohibit use of == and != in favor of === and !==.
|
||||
"eqeqeq": true,
|
||||
|
||||
// Suppress warnings about == null comparisons.
|
||||
"eqnull": true,
|
||||
|
||||
// Enforce tab width of 2 spaces.
|
||||
"indent": 2,
|
||||
|
||||
"smarttabs": true,
|
||||
|
||||
// Prohibit use of a variable before it is defined.
|
||||
"latedef": true,
|
||||
|
||||
// Require capitalized names for constructor functions.
|
||||
"newcap": true,
|
||||
|
||||
// Enforce use of single quotation marks for strings.
|
||||
"quotmark": "single",
|
||||
|
||||
// Prohibit trailing whitespace.
|
||||
"trailing": true,
|
||||
|
||||
// Prohibit use of explicitly undeclared variables.
|
||||
"undef": true,
|
||||
|
||||
// Warn when variables are defined but never used.
|
||||
"unused": true,
|
||||
|
||||
// All loops and conditionals should have braces.
|
||||
"curly": true
|
||||
}
|
@ -0,0 +1,3 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "6.9"
|
22
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/LICENSE
Normal file
@ -0,0 +1,22 @@
|
||||
Copyright (c) 2012, Kartena AB
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
162
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/README.md
Normal file
@ -0,0 +1,162 @@
|
||||
# Proj4Leaflet [![NPM version](https://badge.fury.io/js/proj4leaflet.png)](http://badge.fury.io/js/proj4leaflet) [![Build Status](https://travis-ci.org/kartena/Proj4Leaflet.svg?branch=master)](https://travis-ci.org/kartena/Proj4Leaflet)
|
||||
|
||||
This [Leaflet](http://leafletjs.com) plugin adds support for using projections supported by
|
||||
[Proj4js](https://github.com/proj4js/proj4js).
|
||||
|
||||
_Proj4Leaflet uses Leaflet 1.0.3, for compatibility with Leaflet 0.7.x use the [0.7.2](https://github.com/kartena/Proj4Leaflet/releases/tag/0.7.2) release._
|
||||
|
||||
Leaflet comes with built in support for tiles in [Spherical Mercator](http://wiki.openstreetmap.org/wiki/EPSG:3857) and [a few other projections](http://leafletjs.com/reference-1.0.0.html#crs-l-crs-epsg3395).
|
||||
If you need support for tile layers in other projections, the Proj4Leaflet plugin lets you use tiles in any projection
|
||||
supported by Proj4js, which means support for just about any projection commonly used.
|
||||
|
||||
Proj4Leaflet also adds support for GeoJSON in any projection, while Leaflet by itself assumes GeoJSON to always
|
||||
use WGS84 as its projection.
|
||||
|
||||
Image overlays with bounds set from projected coordinates rather than `LatLng`s are also supported by Proj4Leaflet plugin.
|
||||
|
||||
For more details, see this blog post on [tiling and projections](http://blog.kartena.se/local-projections-in-a-world-of-spherical-mercator/).
|
||||
|
||||
## Usage
|
||||
|
||||
Common use means making a new CRS instance for the projection you want to use.
|
||||
|
||||
```javascript
|
||||
// RT90 with map's pixel origin at RT90 coordinate (0, 0)
|
||||
var crs = new L.Proj.CRS('EPSG:2400',
|
||||
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
|
||||
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
|
||||
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
|
||||
{
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
);
|
||||
|
||||
var map = L.map('map', {
|
||||
crs: crs,
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);
|
||||
```
|
||||
|
||||
Using options when constructing the CRS, you can set the tile set's origin.
|
||||
|
||||
```javascript
|
||||
// SWEREF 99 TM with map's pixel origin at (218128.7031, 6126002.9379)
|
||||
var crs = new L.Proj.CRS('EPSG:3006',
|
||||
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
origin: [218128.7031, 6126002.9379],
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Proj4js compatibility notice
|
||||
Proj4js has breaking changes introduced after version 1.1.0. The current version of Proj4Leaflet
|
||||
uses Proj4js 2.3.14 or later. If you for some reason need Proj4js version 1.1.0 compatibility, you can
|
||||
still use Proj4Leaflet [version 0.5](https://github.com/kartena/Proj4Leaflet/tree/0.5).
|
||||
|
||||
## API
|
||||
The plugin extends Leaflet with a few classes that helps integrating Proj4's projections into
|
||||
Leaflet's [CRS](http://leafletjs.com/reference-1.0.0.html#crs) abstract class.
|
||||
|
||||
### L.Proj.CRS
|
||||
A CRS implementation that uses a Proj4 definition for the projection.
|
||||
This is likely to be the only class you need to work with in Proj4Leaflet.
|
||||
|
||||
#### Usage example
|
||||
|
||||
```javascript
|
||||
var map = L.map('map', {
|
||||
center: [57.74, 11.94],
|
||||
zoom: 13,
|
||||
crs: L.Proj.CRS('EPSG:2400',
|
||||
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
|
||||
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
|
||||
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
|
||||
{
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
),
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false
|
||||
});
|
||||
```
|
||||
|
||||
#### Constructor
|
||||
|
||||
```javascript
|
||||
L.Proj.CRS(code, proj4def, options)
|
||||
```
|
||||
|
||||
* `code` is the projection's SRS code (only used internally by the Proj4js library)
|
||||
* `proj4def` is the Proj4 definition string for the projection to use
|
||||
* `options` is an options object with these possible parameters:
|
||||
* `origin` - the projected coordinate to use as the map's pixel origin; overrides the `transformation` option if set
|
||||
* `transformation` - an [L.Transformation](http://leafletjs.com/reference-1.0.0.html#transformation) that is used
|
||||
to transform the projected coordinates to pixel coordinates; default is `L.Transformation(1, 0, -1, 0)`
|
||||
* `scales` - an array of scales (pixels per projected coordinate unit) for each corresponding zoom level;
|
||||
default is to use Leaflet's native scales. You should use `scales` _or_ `resolutions`, not both.
|
||||
* `resolutions` - an array of resolutions (projected coordinate units per pixel) for each corresponding zoom level;
|
||||
default is to use Leaflet's native resolutions. You should use `scales` _or_ `resolutions`, not both.
|
||||
* `bounds` - an [L.Bounds](http://leafletjs.com/reference-1.0.0.html#bounds) providing the bounds of CRS in projected
|
||||
coordinates. If defined, Proj4Leaflet will use this in the `getSize` method, otherwise reverting to Leaflet's
|
||||
default size for Spherical Mercator.
|
||||
|
||||
### L.Proj.GeoJSON
|
||||
|
||||
Extends [L.GeoJSON](http://leafletjs.com/reference-1.0.0.html#geojson) to add CRS support. Unlike the TileLayer extension, the
|
||||
CRS is derived from the `name` property of a `crs` defined directly on the GeoJSON object per [the spec](http://www.geojson.org/geojson-spec.html#named-crs).
|
||||
Linked CRSs are not supported.
|
||||
|
||||
**Note:** The relevant Proj4 definition should be defined directly via `proj4.defs` before loading the GeoJSON object.
|
||||
If it is not, Proj4leaflet will throw an error.
|
||||
|
||||
Also, note that future versions of the GeoJSON spec may not include explicit CRS support. See https://github.com/GeoJSONWG/draft-geojson/pull/6 for more information.
|
||||
|
||||
#### Usage Example
|
||||
|
||||
```javascript
|
||||
proj4.defs("urn:ogc:def:crs:EPSG::26915", "+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
|
||||
|
||||
var geojson = {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [481650, 4980105]
|
||||
},
|
||||
crs: {
|
||||
type: "name",
|
||||
properties: {
|
||||
name: "urn:ogc:def:crs:EPSG::26915"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var map = L.map('map');
|
||||
|
||||
L.Proj.geoJson(geojson).addTo(map);
|
||||
```
|
||||
|
||||
### L.Proj.ImageOverlay
|
||||
|
||||
Works like [L.ImageOverlay](http://leafletjs.com/reference-1.0.0.html#imageoverlay), but accepts bounds in the map's
|
||||
projected coordinate system instead of latitudes and longitudes. This is useful when the projected coordinate systems
|
||||
axis do not align with the latitudes and longitudes, which results in distortion with the default image overlay in Leaflet.
|
||||
|
||||
#### Usage Example
|
||||
|
||||
```javascript
|
||||
// Coordinate system is EPSG:28992 / Amersfoort / RD New
|
||||
var imageBounds = L.bounds(
|
||||
[145323.20011251318, 475418.56045463786],
|
||||
[175428.80013969325, 499072.9604685671]
|
||||
);
|
||||
|
||||
L.Proj.imageOverlay('http://geo.flevoland.nl/arcgis/rest/services/Groen_Natuur/Agrarische_Natuur/MapServer/export?' +
|
||||
'format=png24&transparent=true&f=image&bboxSR=28992&imageSR=28992&layers=show%3A0' +
|
||||
'&bbox=145323.20011251318%2C475418.56045463786%2C175428.80013969325%2C499072.9604685671&size=560%2C440',
|
||||
imageBounds);
|
||||
```
|
53
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/bower.json
Normal file
@ -0,0 +1,53 @@
|
||||
{
|
||||
"name": "Proj4Leaflet",
|
||||
"version": "1.0.1",
|
||||
"homepage": "https://github.com/kartena/Proj4Leaflet",
|
||||
"authors": [
|
||||
"Per Liedman <per.liedman@kartena.se> (https://github.com/perliedman/)",
|
||||
"Peter Thorin (https://github.com/pthorin/)",
|
||||
"Semone Kallin Thander (https://github.com/semone/)",
|
||||
"S. Andrew Sheppard (https://github.com/sheppard)",
|
||||
"Leigh Hunt (https://github.com/leighghunt/)",
|
||||
"Andris Nolendorfs (https://github.com/theashyster)",
|
||||
"Vladimir Agafonkin (https://github.com/mourner)",
|
||||
"Juuso Lehtinen (https://github.com/jleh)",
|
||||
"Mattias Bengtsson (https://github.com/moonlite/)",
|
||||
"Denis Rykov (http://github.com/drnextgis) ",
|
||||
"Jose manuel Vivó Arnal (Chema) (http://github.com/jmvivo) ",
|
||||
"Daniel Garcia (http://github.com/keyjote) ",
|
||||
"Mathieu Leplatre (https://github.com/leplatrem)",
|
||||
"Benny Lichtner (http://github.com/bennlich) ",
|
||||
"Christopher Fredén (https://github.com/icetan/)",
|
||||
"dpzaba (http://github.com/dpzaba) ",
|
||||
"Edward Mac Gillavry (http://github.com/emacgillavry) ",
|
||||
"Emil Goude (http://github.com/Stockholmsnovis) ",
|
||||
"Simon Legner (http://github.com/simon04) ",
|
||||
"Tom Blackmore (http://github.com/tablackmore) ",
|
||||
"Fabien NICOLLET (https://github.com/fnicollet)"
|
||||
],
|
||||
"description": "Smooth Proj4js integration with Leaflet",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"node"
|
||||
],
|
||||
"main": [
|
||||
"src/proj4leaflet.js"
|
||||
],
|
||||
"keywords": [
|
||||
"Leaflet",
|
||||
"Project4"
|
||||
],
|
||||
"license": "BSD-2-Clause",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"lib",
|
||||
"examples",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"proj4": "^2.3.14"
|
||||
}
|
||||
}
|
@ -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 |
@ -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;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
5485
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/lib/proj4.js
Normal file
@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "proj4leaflet",
|
||||
"version": "1.0.1",
|
||||
"description": "Smooth Proj4js integration with Leaflet",
|
||||
"main": "src/proj4leaflet.js",
|
||||
"directories": {
|
||||
"test": "test",
|
||||
"example": "examples"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "mocha-phantomjs test/mocha.html"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/kartena/Proj4Leaflet.git"
|
||||
},
|
||||
"keywords": [
|
||||
"maps",
|
||||
"proj4",
|
||||
"projection",
|
||||
"leaflet"
|
||||
],
|
||||
"author": "Per Liedman <per.liedman@kartena.se> (https://github.com/perliedman/)",
|
||||
"contributors": [
|
||||
"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)"
|
||||
],
|
||||
"license": "BSD-2-Clause",
|
||||
"bugs": {
|
||||
"url": "https://github.com/kartena/Proj4Leaflet/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"proj4": "^2.3.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mocha": "^3.2.0",
|
||||
"mocha-phantomjs": "^4.1.0"
|
||||
}
|
||||
}
|
@ -0,0 +1,263 @@
|
||||
(function (factory) {
|
||||
var L, proj4;
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD
|
||||
define(['leaflet', 'proj4'], factory);
|
||||
} else if (typeof module === 'object' && typeof module.exports === "object") {
|
||||
// Node/CommonJS
|
||||
L = require('leaflet');
|
||||
proj4 = require('proj4');
|
||||
module.exports = factory(L, proj4);
|
||||
} else {
|
||||
// Browser globals
|
||||
if (typeof window.L === 'undefined' || typeof window.proj4 === 'undefined')
|
||||
throw 'Leaflet and proj4 must be loaded first';
|
||||
factory(window.L, window.proj4);
|
||||
}
|
||||
}(function (L, proj4) {
|
||||
|
||||
L.Proj = {};
|
||||
|
||||
L.Proj._isProj4Obj = function(a) {
|
||||
return (typeof a.inverse !== 'undefined' &&
|
||||
typeof a.forward !== 'undefined');
|
||||
};
|
||||
|
||||
L.Proj.Projection = L.Class.extend({
|
||||
initialize: function(code, def, bounds) {
|
||||
var isP4 = L.Proj._isProj4Obj(code);
|
||||
this._proj = isP4 ? code : this._projFromCodeDef(code, def);
|
||||
this.bounds = isP4 ? def : bounds;
|
||||
},
|
||||
|
||||
project: function (latlng) {
|
||||
var point = this._proj.forward([latlng.lng, latlng.lat]);
|
||||
return new L.Point(point[0], point[1]);
|
||||
},
|
||||
|
||||
unproject: function (point, unbounded) {
|
||||
var point2 = this._proj.inverse([point.x, point.y]);
|
||||
return new L.LatLng(point2[1], point2[0], unbounded);
|
||||
},
|
||||
|
||||
_projFromCodeDef: function(code, def) {
|
||||
if (def) {
|
||||
proj4.defs(code, def);
|
||||
} else if (proj4.defs[code] === undefined) {
|
||||
var urn = code.split(':');
|
||||
if (urn.length > 3) {
|
||||
code = urn[urn.length - 3] + ':' + urn[urn.length - 1];
|
||||
}
|
||||
if (proj4.defs[code] === undefined) {
|
||||
throw 'No projection definition for code ' + code;
|
||||
}
|
||||
}
|
||||
|
||||
return proj4(code);
|
||||
}
|
||||
});
|
||||
|
||||
L.Proj.CRS = L.Class.extend({
|
||||
includes: L.CRS,
|
||||
|
||||
options: {
|
||||
transformation: new L.Transformation(1, 0, -1, 0)
|
||||
},
|
||||
|
||||
initialize: function(a, b, c) {
|
||||
var code,
|
||||
proj,
|
||||
def,
|
||||
options;
|
||||
|
||||
if (L.Proj._isProj4Obj(a)) {
|
||||
proj = a;
|
||||
code = proj.srsCode;
|
||||
options = b || {};
|
||||
|
||||
this.projection = new L.Proj.Projection(proj, options.bounds);
|
||||
} else {
|
||||
code = a;
|
||||
def = b;
|
||||
options = c || {};
|
||||
this.projection = new L.Proj.Projection(code, def, options.bounds);
|
||||
}
|
||||
|
||||
L.Util.setOptions(this, options);
|
||||
this.code = code;
|
||||
this.transformation = this.options.transformation;
|
||||
|
||||
if (this.options.origin) {
|
||||
this.transformation =
|
||||
new L.Transformation(1, -this.options.origin[0],
|
||||
-1, this.options.origin[1]);
|
||||
}
|
||||
|
||||
if (this.options.scales) {
|
||||
this._scales = this.options.scales;
|
||||
} else if (this.options.resolutions) {
|
||||
this._scales = [];
|
||||
for (var i = this.options.resolutions.length - 1; i >= 0; i--) {
|
||||
if (this.options.resolutions[i]) {
|
||||
this._scales[i] = 1 / this.options.resolutions[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.infinite = !this.options.bounds;
|
||||
|
||||
},
|
||||
|
||||
scale: function(zoom) {
|
||||
var iZoom = Math.floor(zoom),
|
||||
baseScale,
|
||||
nextScale,
|
||||
scaleDiff,
|
||||
zDiff;
|
||||
if (zoom === iZoom) {
|
||||
return this._scales[zoom];
|
||||
} else {
|
||||
// Non-integer zoom, interpolate
|
||||
baseScale = this._scales[iZoom];
|
||||
nextScale = this._scales[iZoom + 1];
|
||||
scaleDiff = nextScale - baseScale;
|
||||
zDiff = (zoom - iZoom);
|
||||
return baseScale + scaleDiff * zDiff;
|
||||
}
|
||||
},
|
||||
|
||||
zoom: function(scale) {
|
||||
// Find closest number in this._scales, down
|
||||
var downScale = this._closestElement(this._scales, scale),
|
||||
downZoom = this._scales.indexOf(downScale),
|
||||
nextScale,
|
||||
nextZoom,
|
||||
scaleDiff;
|
||||
// Check if scale is downScale => return array index
|
||||
if (scale === downScale) {
|
||||
return downZoom;
|
||||
}
|
||||
// Interpolate
|
||||
nextZoom = downZoom + 1;
|
||||
nextScale = this._scales[nextZoom];
|
||||
if (nextScale === undefined) {
|
||||
return Infinity;
|
||||
}
|
||||
scaleDiff = nextScale - downScale;
|
||||
return (scale - downScale) / scaleDiff + downZoom;
|
||||
},
|
||||
|
||||
distance: L.CRS.Earth.distance,
|
||||
|
||||
R: L.CRS.Earth.R,
|
||||
|
||||
/* Get the closest lowest element in an array */
|
||||
_closestElement: function(array, element) {
|
||||
var low;
|
||||
for (var i = array.length; i--;) {
|
||||
if (array[i] <= element && (low === undefined || low < array[i])) {
|
||||
low = array[i];
|
||||
}
|
||||
}
|
||||
return low;
|
||||
}
|
||||
});
|
||||
|
||||
L.Proj.GeoJSON = L.GeoJSON.extend({
|
||||
initialize: function(geojson, options) {
|
||||
this._callLevel = 0;
|
||||
L.GeoJSON.prototype.initialize.call(this, geojson, options);
|
||||
},
|
||||
|
||||
addData: function(geojson) {
|
||||
var crs;
|
||||
|
||||
if (geojson) {
|
||||
if (geojson.crs && geojson.crs.type === 'name') {
|
||||
crs = new L.Proj.CRS(geojson.crs.properties.name);
|
||||
} else if (geojson.crs && geojson.crs.type) {
|
||||
crs = new L.Proj.CRS(geojson.crs.type + ':' + geojson.crs.properties.code);
|
||||
}
|
||||
|
||||
if (crs !== undefined) {
|
||||
this.options.coordsToLatLng = function(coords) {
|
||||
var point = L.point(coords[0], coords[1]);
|
||||
return crs.projection.unproject(point);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Base class' addData might call us recursively, but
|
||||
// CRS shouldn't be cleared in that case, since CRS applies
|
||||
// to the whole GeoJSON, inluding sub-features.
|
||||
this._callLevel++;
|
||||
try {
|
||||
L.GeoJSON.prototype.addData.call(this, geojson);
|
||||
} finally {
|
||||
this._callLevel--;
|
||||
if (this._callLevel === 0) {
|
||||
delete this.options.coordsToLatLng;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
L.Proj.geoJson = function(geojson, options) {
|
||||
return new L.Proj.GeoJSON(geojson, options);
|
||||
};
|
||||
|
||||
L.Proj.ImageOverlay = L.ImageOverlay.extend({
|
||||
initialize: function (url, bounds, options) {
|
||||
L.ImageOverlay.prototype.initialize.call(this, url, null, options);
|
||||
this._projectedBounds = bounds;
|
||||
},
|
||||
|
||||
// Danger ahead: Overriding internal methods in Leaflet.
|
||||
// Decided to do this rather than making a copy of L.ImageOverlay
|
||||
// and doing very tiny modifications to it.
|
||||
// Future will tell if this was wise or not.
|
||||
_animateZoom: function (event) {
|
||||
var scale = this._map.getZoomScale(event.zoom);
|
||||
var northWest = L.point(this._projectedBounds.min.x, this._projectedBounds.max.y);
|
||||
var offset = this._projectedToNewLayerPoint(northWest, event.zoom, event.center);
|
||||
|
||||
L.DomUtil.setTransform(this._image, offset, scale);
|
||||
},
|
||||
|
||||
_reset: function () {
|
||||
var zoom = this._map.getZoom();
|
||||
var pixelOrigin = this._map.getPixelOrigin();
|
||||
var bounds = L.bounds(
|
||||
this._transform(this._projectedBounds.min, zoom)._subtract(pixelOrigin),
|
||||
this._transform(this._projectedBounds.max, zoom)._subtract(pixelOrigin)
|
||||
);
|
||||
var size = bounds.getSize();
|
||||
|
||||
L.DomUtil.setPosition(this._image, bounds.min);
|
||||
this._image.style.width = size.x + 'px';
|
||||
this._image.style.height = size.y + 'px';
|
||||
},
|
||||
|
||||
_projectedToNewLayerPoint: function (point, zoom, center) {
|
||||
var viewHalf = this._map.getSize()._divideBy(2);
|
||||
var newTopLeft = this._map.project(center, zoom)._subtract(viewHalf)._round();
|
||||
var topLeft = newTopLeft.add(this._map._getMapPanePos());
|
||||
|
||||
return this._transform(point, zoom)._subtract(topLeft);
|
||||
},
|
||||
|
||||
_transform: function (point, zoom) {
|
||||
var crs = this._map.options.crs;
|
||||
var transformation = crs.transformation;
|
||||
var scale = crs.scale(zoom);
|
||||
|
||||
return transformation.transform(point, scale);
|
||||
}
|
||||
});
|
||||
|
||||
L.Proj.imageOverlay = function (url, bounds, options) {
|
||||
return new L.Proj.ImageOverlay(url, bounds, options);
|
||||
};
|
||||
|
||||
return L.Proj;
|
||||
}));
|
@ -0,0 +1,29 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mocha Tests</title>
|
||||
<link href="http://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<script src="http://cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
|
||||
<script src="http://cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
|
||||
|
||||
<script>mocha.setup('bdd')</script>
|
||||
<!-- include source files here... -->
|
||||
<script type="text/javascript" src="../lib/leaflet/leaflet-src.js"></script>
|
||||
<script type="text/javascript" src="../lib/proj4-compressed.js"></script>
|
||||
<script type="text/javascript" src="../src/proj4leaflet.js"></script>
|
||||
|
||||
<!-- include spec files here... -->
|
||||
<script type="text/javascript" src="test-data.js"></script>
|
||||
<script type="text/javascript" src="specs.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
mocha.checkLeaks();
|
||||
mocha.globals(['jQuery']);
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
184
sandbox/lines-polygons/leaflet/Proj4Leaflet-1.0.1/test/specs.js
Normal file
@ -0,0 +1,184 @@
|
||||
|
||||
describe('L.Proj.Projection', function() {
|
||||
it('can create an instance from a SRS code and proj4 def', function() {
|
||||
new L.Proj.Projection(
|
||||
'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');
|
||||
});
|
||||
});
|
||||
|
||||
describe('L.Proj.CRS', function() {
|
||||
it('can create an instance from a SRS code and proj4 def', function() {
|
||||
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');
|
||||
|
||||
expect(crs.code).to.be('EPSG:2400');
|
||||
});
|
||||
|
||||
it('can project a coordinate to a point in the defined SRS', function() {
|
||||
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');
|
||||
|
||||
var pp = crs.project(new L.LatLng(55.723337, 14.194313));
|
||||
expect(pp.x).to.be.within(1398775, 1398777);
|
||||
expect(pp.y).to.be.within(6178303, 6178305);
|
||||
});
|
||||
|
||||
it('has a default transformation that is [1, 0, -1, 0]', function() {
|
||||
var crs = new L.Proj.CRS('EPSG:4326', '', {
|
||||
resolutions: [1]
|
||||
});
|
||||
var ll = new L.LatLng(1, 1),
|
||||
pp = crs.latLngToPoint(ll, 0),
|
||||
up = crs.pointToLatLng(pp, 0);
|
||||
|
||||
expect(pp.x).to.be(ll.lng);
|
||||
expect(pp.y).to.be(-ll.lat);
|
||||
expect(up.lat).to.be(ll.lng);
|
||||
expect(up.lng).to.be(ll.lat);
|
||||
});
|
||||
|
||||
it('uses provided zoom level scales', function() {
|
||||
var crs = new L.Proj.CRS('EPSG:4326', '', {
|
||||
scales: [1, 2, 3]
|
||||
});
|
||||
var ll = new L.LatLng(1, 1);
|
||||
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var pp = crs.latLngToPoint(ll, i),
|
||||
up = crs.pointToLatLng(pp, i),
|
||||
s = i + 1;
|
||||
|
||||
expect(pp.x).to.be(ll.lng * s);
|
||||
expect(pp.y).to.be(-ll.lat * s);
|
||||
expect(up.lat).to.be(ll.lng);
|
||||
expect(up.lng).to.be(ll.lat);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
it('uses provided zoom level resolutions', function() {
|
||||
var crs = new L.Proj.CRS('EPSG:4326', '', {
|
||||
resolutions: [1, 0.5, 1 / 3]
|
||||
});
|
||||
var ll = new L.LatLng(1, 1);
|
||||
|
||||
for (var i = 0; i < 3; i++) {
|
||||
var pp = crs.latLngToPoint(ll, i),
|
||||
up = crs.pointToLatLng(pp, i),
|
||||
s = i + 1;
|
||||
expect(pp.x).to.be(ll.lng * s);
|
||||
expect(pp.y).to.be(-ll.lat * s);
|
||||
expect(up.lat).to.be(ll.lng);
|
||||
expect(up.lng).to.be(ll.lat);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
it('uses provided origin', function() {
|
||||
var crs = new L.Proj.CRS('EPSG:4326', '', {
|
||||
resolutions: [1],
|
||||
origin: [10, 10]
|
||||
});
|
||||
|
||||
var ll = new L.LatLng(12, 12),
|
||||
pp = crs.latLngToPoint(ll, 0),
|
||||
up = crs.pointToLatLng(pp, 0);
|
||||
|
||||
expect(pp.x.toPrecision(6)).to.be((ll.lng - 10).toPrecision(6));
|
||||
expect(pp.y.toPrecision(6)).to.be((-ll.lat + 10).toPrecision(6));
|
||||
expect(up.lat.toPrecision(6)).to.be(ll.lng.toPrecision(6));
|
||||
expect(up.lng.toPrecision(6)).to.be(ll.lat.toPrecision(6));
|
||||
|
||||
});
|
||||
|
||||
it('accepts custom transformation', function() {
|
||||
var crs = new L.Proj.CRS('EPSG:4326', '', {
|
||||
resolutions: [1],
|
||||
transformation: new L.Transformation(3, 0, 1, -5)
|
||||
});
|
||||
|
||||
var ll = new L.LatLng(10, 10),
|
||||
pp = crs.latLngToPoint(ll, 0),
|
||||
up = crs.pointToLatLng(pp, 0);
|
||||
|
||||
expect(pp.x).to.be(ll.lng * 3);
|
||||
expect(pp.y).to.be(ll.lat - 5);
|
||||
expect(up.lat).to.be(ll.lng);
|
||||
expect(up.lng).to.be(ll.lat);
|
||||
});
|
||||
|
||||
it('size from bounds', function() {
|
||||
var resolutions = [2, 1, 0.5],
|
||||
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', {
|
||||
bounds: L.bounds([0, 0], [4000, 5000]),
|
||||
resolutions: resolutions,
|
||||
origin: [0, 5000]
|
||||
}),
|
||||
worldSize = 256,
|
||||
i,
|
||||
bounds;
|
||||
|
||||
for (i = 0; i < resolutions.length; i++) {
|
||||
bounds = crs.getProjectedBounds(i);
|
||||
expect(bounds.max.x).to.be(4000 / resolutions[i]);
|
||||
expect(bounds.max.y).to.be(5000 / resolutions[i]);
|
||||
worldSize *= 2;
|
||||
}
|
||||
});
|
||||
|
||||
it('converts zoom to scale and vice versa and returns the same values', function () {
|
||||
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
|
||||
]
|
||||
});
|
||||
|
||||
expect(crs.zoom(crs.scale(8.9578457485))).to.be(8.9578457485);
|
||||
expect(crs.zoom(crs.scale(8))).to.be(8);
|
||||
expect(crs.zoom(crs.scale(1/8191)).toPrecision(6)).to.be((1/8191).toPrecision(6));
|
||||
expect(crs.zoom(crs.scale(0.5))).to.be(0.5);
|
||||
expect(crs.zoom(crs.scale(0.51))).to.be(0.51);
|
||||
});
|
||||
|
||||
it('converts scale to zoom and returns Infinity if the scale passed in is bigger than maximum scale', function () {
|
||||
var crs = new L.Proj.CRS('EPSG:3006', '', {
|
||||
scales: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect(crs.zoom(4)).to.be(Infinity);
|
||||
expect(crs.zoom(Infinity)).to.be(Infinity);
|
||||
});
|
||||
|
||||
it('tests that distance works (L.CRS.Earth.Distance)', function testDistance() {
|
||||
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', {
|
||||
scales: [1, 2, 3]
|
||||
});
|
||||
|
||||
expect(
|
||||
crs.distance(
|
||||
crs.unproject(new L.Point(218128, 6126002)),
|
||||
crs.unproject(new L.Point(218128, 6126003))))
|
||||
.to.be.within(0.9, 1);
|
||||
|
||||
expect(
|
||||
crs.distance(new L.LatLng(57.777, 11.9), new L.LatLng(57.778, 11.9)))
|
||||
.to.be.within(111.194, 111.195);
|
||||
|
||||
});
|
||||
});
|
@ -0,0 +1,9 @@
|
||||
if [ -f contributors ];
|
||||
then
|
||||
rm contributors
|
||||
fi
|
||||
for x
|
||||
in `curl -K contributors.curl | grep -E -w 'url' | grep -o -E 'https[^"]+'`
|
||||
do
|
||||
curl -XGET --url $x -o -| grep -E 'name|html_url' >> contributors
|
||||
done
|
@ -0,0 +1,3 @@
|
||||
-XGET
|
||||
--url "https://api.github.com/repos/kartena/Proj4Leaflet/contributors?anon=0"
|
||||
-o -
|
BIN
sandbox/lines-polygons/leaflet/images/layers-2x.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
sandbox/lines-polygons/leaflet/images/layers.png
Normal file
After Width: | Height: | Size: 696 B |
BIN
sandbox/lines-polygons/leaflet/images/marker-icon-2x.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
sandbox/lines-polygons/leaflet/images/marker-icon.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
sandbox/lines-polygons/leaflet/images/marker-shadow.png
Normal file
After Width: | Height: | Size: 618 B |
162
sandbox/lines-polygons/leaflet/leaflet-hash.js
Normal file
@ -0,0 +1,162 @@
|
||||
(function(window) {
|
||||
var HAS_HASHCHANGE = (function() {
|
||||
var doc_mode = window.documentMode;
|
||||
return ('onhashchange' in window) &&
|
||||
(doc_mode === undefined || doc_mode > 7);
|
||||
})();
|
||||
|
||||
L.Hash = function(map) {
|
||||
this.onHashChange = L.Util.bind(this.onHashChange, this);
|
||||
|
||||
if (map) {
|
||||
this.init(map);
|
||||
}
|
||||
};
|
||||
|
||||
L.Hash.parseHash = function(hash) {
|
||||
if(hash.indexOf('#') === 0) {
|
||||
hash = hash.substr(1);
|
||||
}
|
||||
var args = hash.split("/");
|
||||
if (args.length == 3) {
|
||||
var zoom = parseInt(args[0], 10),
|
||||
lat = parseFloat(args[1]),
|
||||
lon = parseFloat(args[2]);
|
||||
if (isNaN(zoom) || isNaN(lat) || isNaN(lon)) {
|
||||
return false;
|
||||
} else {
|
||||
return {
|
||||
center: new L.LatLng(lat, lon),
|
||||
zoom: zoom
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
L.Hash.formatHash = function(map) {
|
||||
var center = map.getCenter(),
|
||||
zoom = map.getZoom(),
|
||||
precision = Math.max(0, Math.ceil(Math.log(zoom) / Math.LN2));
|
||||
|
||||
return "#" + [zoom,
|
||||
center.lat.toFixed(precision),
|
||||
center.lng.toFixed(precision)
|
||||
].join("/");
|
||||
},
|
||||
|
||||
L.Hash.prototype = {
|
||||
map: null,
|
||||
lastHash: null,
|
||||
|
||||
parseHash: L.Hash.parseHash,
|
||||
formatHash: L.Hash.formatHash,
|
||||
|
||||
init: function(map) {
|
||||
this.map = map;
|
||||
|
||||
// reset the hash
|
||||
this.lastHash = null;
|
||||
this.onHashChange();
|
||||
|
||||
if (!this.isListening) {
|
||||
this.startListening();
|
||||
}
|
||||
},
|
||||
|
||||
removeFrom: function(map) {
|
||||
if (this.changeTimeout) {
|
||||
clearTimeout(this.changeTimeout);
|
||||
}
|
||||
|
||||
if (this.isListening) {
|
||||
this.stopListening();
|
||||
}
|
||||
|
||||
this.map = null;
|
||||
},
|
||||
|
||||
onMapMove: function() {
|
||||
// bail if we're moving the map (updating from a hash),
|
||||
// or if the map is not yet loaded
|
||||
|
||||
if (this.movingMap || !this.map._loaded) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var hash = this.formatHash(this.map);
|
||||
if (this.lastHash != hash) {
|
||||
location.replace(hash);
|
||||
this.lastHash = hash;
|
||||
}
|
||||
},
|
||||
|
||||
movingMap: false,
|
||||
update: function() {
|
||||
var hash = location.hash;
|
||||
if (hash === this.lastHash) {
|
||||
return;
|
||||
}
|
||||
var parsed = this.parseHash(hash);
|
||||
if (parsed) {
|
||||
this.movingMap = true;
|
||||
|
||||
this.map.setView(parsed.center, parsed.zoom);
|
||||
|
||||
this.movingMap = false;
|
||||
} else {
|
||||
this.onMapMove(this.map);
|
||||
}
|
||||
},
|
||||
|
||||
// defer hash change updates every 100ms
|
||||
changeDefer: 100,
|
||||
changeTimeout: null,
|
||||
onHashChange: function() {
|
||||
// throttle calls to update() so that they only happen every
|
||||
// `changeDefer` ms
|
||||
if (!this.changeTimeout) {
|
||||
var that = this;
|
||||
this.changeTimeout = setTimeout(function() {
|
||||
that.update();
|
||||
that.changeTimeout = null;
|
||||
}, this.changeDefer);
|
||||
}
|
||||
},
|
||||
|
||||
isListening: false,
|
||||
hashChangeInterval: null,
|
||||
startListening: function() {
|
||||
this.map.on("moveend", this.onMapMove, this);
|
||||
|
||||
if (HAS_HASHCHANGE) {
|
||||
L.DomEvent.addListener(window, "hashchange", this.onHashChange);
|
||||
} else {
|
||||
clearInterval(this.hashChangeInterval);
|
||||
this.hashChangeInterval = setInterval(this.onHashChange, 50);
|
||||
}
|
||||
this.isListening = true;
|
||||
},
|
||||
|
||||
stopListening: function() {
|
||||
this.map.off("moveend", this.onMapMove, this);
|
||||
|
||||
if (HAS_HASHCHANGE) {
|
||||
L.DomEvent.removeListener(window, "hashchange", this.onHashChange);
|
||||
} else {
|
||||
clearInterval(this.hashChangeInterval);
|
||||
}
|
||||
this.isListening = false;
|
||||
}
|
||||
};
|
||||
L.hash = function(map) {
|
||||
return new L.Hash(map);
|
||||
};
|
||||
L.Map.prototype.addHash = function() {
|
||||
this._hash = L.hash(this);
|
||||
};
|
||||
L.Map.prototype.removeHash = function() {
|
||||
this._hash.removeFrom();
|
||||
};
|
||||
})(window);
|
13170
sandbox/lines-polygons/leaflet/leaflet-src.js
Normal file
1
sandbox/lines-polygons/leaflet/leaflet-src.map
Normal file
624
sandbox/lines-polygons/leaflet/leaflet.css
Normal file
@ -0,0 +1,624 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-drag {
|
||||
-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;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-clickable {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
margin-left: -12px;
|
||||
border-right-color: #fff;
|
||||
}
|
9
sandbox/lines-polygons/leaflet/leaflet.js
Normal file
@ -200,13 +200,6 @@
|
||||
transparent: true,
|
||||
}),
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
WMTS: L.tileLayer(
|
||||
'https://geoservices.wallonie.be/arcgis/rest/services/IMAGERIE/ORTHO_LAST/MapServer/WTMS/tile/1.0.0/?' +
|
||||
"&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0" +
|
||||
@ -222,21 +215,25 @@
|
||||
transparent: true,
|
||||
tileSize : 512
|
||||
})
|
||||
// WMTS: L.tileLayer(
|
||||
// 'http://geoservices.wallonie.be/arcgis/rest/services/IMAGERIE/ORTHO_2019/MapServer/tile/{z}/{x}/{y}', {
|
||||
// attribution: '© SPW',
|
||||
// transparent: true,
|
||||
// tileSize : 512
|
||||
// })
|
||||
}
|
||||
|
||||
|
||||
map.setView([50.5, 5.57], 10);
|
||||
|
||||
L.control.layers(basemaps).addTo(map);
|
||||
|
||||
var hash = L.hash(map);
|
||||
|
||||
|
||||
var latlngs = [
|
||||
[45.51, -122.68],
|
||||
[37.77, -122.43],
|
||||
[34.04, -118.2]
|
||||
];
|
||||
|
||||
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<footer>
|
||||
<div>
|
||||
|