#14 add line edition in leaflet in sandbox
This commit is contained in:
nobohan
parent
cdf6e4ac45
commit
07e76fa6a8
|
|
@ -0,0 +1,3 @@
|
|||
How to draw lines and polygons in Leaflet: sandbox for testing
|
||||
=================================
|
||||
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="height:100%;margin:0;padding:0;">
|
||||
<head>
|
||||
<title>Tests edit line - polygon</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
|
||||
<script src="./leaflet/leaflet-hash.js"></script>
|
||||
<style type="text/css">
|
||||
.leaflet-tile-container { pointer-events: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body style="height:100%;margin:0;padding:0;">
|
||||
<div id="map" style="height:100%"></div>
|
||||
<script>
|
||||
const map = L.map('map').setView([50.5, 5.57], 10);
|
||||
|
||||
const cyclosm = L.tileLayer('https://{s}.tiles.champs-libres.be/cyclosm/{z}/{x}/{y}.png', {
|
||||
subdomains: "abc",
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
maxZoom: 20
|
||||
});
|
||||
|
||||
map.addLayer(cyclosm);
|
||||
|
||||
const hash = L.hash(map);
|
||||
|
||||
let geometryType = 'LINESTRING'; //'POINT' | 'LINESTRING' | 'POLYGON'
|
||||
let myMarker = null;
|
||||
let polyline = null;
|
||||
let previousPolyline = null;
|
||||
let previousLayerPoint = null;
|
||||
const lineDraw = L.polyline([], {color: '#11aa9e', dashArray: '6', lineCap: 'butt'}).addTo(map);
|
||||
|
||||
const pointDistance = (pointA, pointB) => {
|
||||
const SNAP_DISTANCE = 6;
|
||||
let distancePixel = Math.sqrt(Math.abs((pointB.x - pointA.x)**2 - (pointB.y - pointA.y)**2));
|
||||
return distancePixel < SNAP_DISTANCE;
|
||||
};
|
||||
|
||||
const arePointsSnapped = (previousPoint, currentPoint) =>
|
||||
(previousPoint && currentPoint) ? pointDistance(previousPoint, currentPoint) : false;
|
||||
|
||||
switch(geometryType){
|
||||
case 'LINESTRING':
|
||||
map.on('mousemove', (e) => {
|
||||
if(polyline){
|
||||
let lastDrawPoint = polyline.getLatLngs()[polyline.getLatLngs().length - 1];
|
||||
lineDraw.setLatLngs([lastDrawPoint, e.latlng]);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
map.on('click', (e) => {
|
||||
console.log(e);
|
||||
|
||||
switch(geometryType){
|
||||
case 'POINT':
|
||||
default:
|
||||
if (myMarker !== null) {
|
||||
map.removeLayer(myMarker);
|
||||
}
|
||||
myMarker = L.marker(e.latlng).addTo(map);
|
||||
case 'LINESTRING':
|
||||
lineDraw.setLatLngs([]);
|
||||
if (polyline === null){
|
||||
console.log(previousPolyline)
|
||||
if (previousPolyline !== null){
|
||||
map.removeLayer(previousPolyline);
|
||||
}
|
||||
polyline = L.polyline([e.latlng], {color: '#11aa9e'}).addTo(map);
|
||||
} else {
|
||||
if (arePointsSnapped(previousLayerPoint, e.layerPoint)) {
|
||||
console.log('reset line')
|
||||
previousPolyline = polyline;
|
||||
polyline.setStyle({color: '#60b15c'});
|
||||
polyline = null;
|
||||
} else {
|
||||
polyline.addLatLng(e.latlng);
|
||||
previousLayerPoint = e.layerPoint;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
.lvimrc
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
{
|
||||
/*
|
||||
* ENVIRONMENTS
|
||||
* =================
|
||||
*/
|
||||
|
||||
// Define globals exposed by modern browsers.
|
||||
"browser": true,
|
||||
|
||||
// Define globals exposed by jQuery.
|
||||
"jquery": true,
|
||||
|
||||
"globals": {"L": false, "proj4": false},
|
||||
|
||||
/*
|
||||
* ENFORCING OPTIONS
|
||||
* =================
|
||||
*/
|
||||
|
||||
// Force all variable names to use either camelCase style or UPPER_CASE
|
||||
// with underscores.
|
||||
"camelcase": true,
|
||||
|
||||
// Prohibit use of == and != in favor of === and !==.
|
||||
"eqeqeq": true,
|
||||
|
||||
// Suppress warnings about == null comparisons.
|
||||
"eqnull": true,
|
||||
|
||||
// Enforce tab width of 2 spaces.
|
||||
"indent": 2,
|
||||
|
||||
"smarttabs": true,
|
||||
|
||||
// Prohibit use of a variable before it is defined.
|
||||
"latedef": true,
|
||||
|
||||
// Require capitalized names for constructor functions.
|
||||
"newcap": true,
|
||||
|
||||
// Enforce use of single quotation marks for strings.
|
||||
"quotmark": "single",
|
||||
|
||||
// Prohibit trailing whitespace.
|
||||
"trailing": true,
|
||||
|
||||
// Prohibit use of explicitly undeclared variables.
|
||||
"undef": true,
|
||||
|
||||
// Warn when variables are defined but never used.
|
||||
"unused": true,
|
||||
|
||||
// All loops and conditionals should have braces.
|
||||
"curly": true
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "6.9"
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Copyright (c) 2012, Kartena AB
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
1. Redistributions of source code must retain the above copyright notice, this
|
||||
list of conditions and the following disclaimer.
|
||||
2. Redistributions in binary form must reproduce the above copyright notice,
|
||||
this list of conditions and the following disclaimer in the documentation
|
||||
and/or other materials provided with the distribution.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
|
||||
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
# Proj4Leaflet [](http://badge.fury.io/js/proj4leaflet) [](https://travis-ci.org/kartena/Proj4Leaflet)
|
||||
|
||||
This [Leaflet](http://leafletjs.com) plugin adds support for using projections supported by
|
||||
[Proj4js](https://github.com/proj4js/proj4js).
|
||||
|
||||
_Proj4Leaflet uses Leaflet 1.0.3, for compatibility with Leaflet 0.7.x use the [0.7.2](https://github.com/kartena/Proj4Leaflet/releases/tag/0.7.2) release._
|
||||
|
||||
Leaflet comes with built in support for tiles in [Spherical Mercator](http://wiki.openstreetmap.org/wiki/EPSG:3857) and [a few other projections](http://leafletjs.com/reference-1.0.0.html#crs-l-crs-epsg3395).
|
||||
If you need support for tile layers in other projections, the Proj4Leaflet plugin lets you use tiles in any projection
|
||||
supported by Proj4js, which means support for just about any projection commonly used.
|
||||
|
||||
Proj4Leaflet also adds support for GeoJSON in any projection, while Leaflet by itself assumes GeoJSON to always
|
||||
use WGS84 as its projection.
|
||||
|
||||
Image overlays with bounds set from projected coordinates rather than `LatLng`s are also supported by Proj4Leaflet plugin.
|
||||
|
||||
For more details, see this blog post on [tiling and projections](http://blog.kartena.se/local-projections-in-a-world-of-spherical-mercator/).
|
||||
|
||||
## Usage
|
||||
|
||||
Common use means making a new CRS instance for the projection you want to use.
|
||||
|
||||
```javascript
|
||||
// RT90 with map's pixel origin at RT90 coordinate (0, 0)
|
||||
var crs = new L.Proj.CRS('EPSG:2400',
|
||||
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
|
||||
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
|
||||
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
|
||||
{
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
);
|
||||
|
||||
var map = L.map('map', {
|
||||
crs: crs,
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false
|
||||
});
|
||||
|
||||
L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);
|
||||
```
|
||||
|
||||
Using options when constructing the CRS, you can set the tile set's origin.
|
||||
|
||||
```javascript
|
||||
// SWEREF 99 TM with map's pixel origin at (218128.7031, 6126002.9379)
|
||||
var crs = new L.Proj.CRS('EPSG:3006',
|
||||
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
origin: [218128.7031, 6126002.9379],
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
);
|
||||
```
|
||||
|
||||
## Proj4js compatibility notice
|
||||
Proj4js has breaking changes introduced after version 1.1.0. The current version of Proj4Leaflet
|
||||
uses Proj4js 2.3.14 or later. If you for some reason need Proj4js version 1.1.0 compatibility, you can
|
||||
still use Proj4Leaflet [version 0.5](https://github.com/kartena/Proj4Leaflet/tree/0.5).
|
||||
|
||||
## API
|
||||
The plugin extends Leaflet with a few classes that helps integrating Proj4's projections into
|
||||
Leaflet's [CRS](http://leafletjs.com/reference-1.0.0.html#crs) abstract class.
|
||||
|
||||
### L.Proj.CRS
|
||||
A CRS implementation that uses a Proj4 definition for the projection.
|
||||
This is likely to be the only class you need to work with in Proj4Leaflet.
|
||||
|
||||
#### Usage example
|
||||
|
||||
```javascript
|
||||
var map = L.map('map', {
|
||||
center: [57.74, 11.94],
|
||||
zoom: 13,
|
||||
crs: L.Proj.CRS('EPSG:2400',
|
||||
'+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' +
|
||||
'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' +
|
||||
'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',
|
||||
{
|
||||
resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions
|
||||
}
|
||||
),
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false
|
||||
});
|
||||
```
|
||||
|
||||
#### Constructor
|
||||
|
||||
```javascript
|
||||
L.Proj.CRS(code, proj4def, options)
|
||||
```
|
||||
|
||||
* `code` is the projection's SRS code (only used internally by the Proj4js library)
|
||||
* `proj4def` is the Proj4 definition string for the projection to use
|
||||
* `options` is an options object with these possible parameters:
|
||||
* `origin` - the projected coordinate to use as the map's pixel origin; overrides the `transformation` option if set
|
||||
* `transformation` - an [L.Transformation](http://leafletjs.com/reference-1.0.0.html#transformation) that is used
|
||||
to transform the projected coordinates to pixel coordinates; default is `L.Transformation(1, 0, -1, 0)`
|
||||
* `scales` - an array of scales (pixels per projected coordinate unit) for each corresponding zoom level;
|
||||
default is to use Leaflet's native scales. You should use `scales` _or_ `resolutions`, not both.
|
||||
* `resolutions` - an array of resolutions (projected coordinate units per pixel) for each corresponding zoom level;
|
||||
default is to use Leaflet's native resolutions. You should use `scales` _or_ `resolutions`, not both.
|
||||
* `bounds` - an [L.Bounds](http://leafletjs.com/reference-1.0.0.html#bounds) providing the bounds of CRS in projected
|
||||
coordinates. If defined, Proj4Leaflet will use this in the `getSize` method, otherwise reverting to Leaflet's
|
||||
default size for Spherical Mercator.
|
||||
|
||||
### L.Proj.GeoJSON
|
||||
|
||||
Extends [L.GeoJSON](http://leafletjs.com/reference-1.0.0.html#geojson) to add CRS support. Unlike the TileLayer extension, the
|
||||
CRS is derived from the `name` property of a `crs` defined directly on the GeoJSON object per [the spec](http://www.geojson.org/geojson-spec.html#named-crs).
|
||||
Linked CRSs are not supported.
|
||||
|
||||
**Note:** The relevant Proj4 definition should be defined directly via `proj4.defs` before loading the GeoJSON object.
|
||||
If it is not, Proj4leaflet will throw an error.
|
||||
|
||||
Also, note that future versions of the GeoJSON spec may not include explicit CRS support. See https://github.com/GeoJSONWG/draft-geojson/pull/6 for more information.
|
||||
|
||||
#### Usage Example
|
||||
|
||||
```javascript
|
||||
proj4.defs("urn:ogc:def:crs:EPSG::26915", "+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");
|
||||
|
||||
var geojson = {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: [481650, 4980105]
|
||||
},
|
||||
crs: {
|
||||
type: "name",
|
||||
properties: {
|
||||
name: "urn:ogc:def:crs:EPSG::26915"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var map = L.map('map');
|
||||
|
||||
L.Proj.geoJson(geojson).addTo(map);
|
||||
```
|
||||
|
||||
### L.Proj.ImageOverlay
|
||||
|
||||
Works like [L.ImageOverlay](http://leafletjs.com/reference-1.0.0.html#imageoverlay), but accepts bounds in the map's
|
||||
projected coordinate system instead of latitudes and longitudes. This is useful when the projected coordinate systems
|
||||
axis do not align with the latitudes and longitudes, which results in distortion with the default image overlay in Leaflet.
|
||||
|
||||
#### Usage Example
|
||||
|
||||
```javascript
|
||||
// Coordinate system is EPSG:28992 / Amersfoort / RD New
|
||||
var imageBounds = L.bounds(
|
||||
[145323.20011251318, 475418.56045463786],
|
||||
[175428.80013969325, 499072.9604685671]
|
||||
);
|
||||
|
||||
L.Proj.imageOverlay('http://geo.flevoland.nl/arcgis/rest/services/Groen_Natuur/Agrarische_Natuur/MapServer/export?' +
|
||||
'format=png24&transparent=true&f=image&bboxSR=28992&imageSR=28992&layers=show%3A0' +
|
||||
'&bbox=145323.20011251318%2C475418.56045463786%2C175428.80013969325%2C499072.9604685671&size=560%2C440',
|
||||
imageBounds);
|
||||
```
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "Proj4Leaflet",
|
||||
"version": "1.0.1",
|
||||
"homepage": "https://github.com/kartena/Proj4Leaflet",
|
||||
"authors": [
|
||||
"Per Liedman <per.liedman@kartena.se> (https://github.com/perliedman/)",
|
||||
"Peter Thorin (https://github.com/pthorin/)",
|
||||
"Semone Kallin Thander (https://github.com/semone/)",
|
||||
"S. Andrew Sheppard (https://github.com/sheppard)",
|
||||
"Leigh Hunt (https://github.com/leighghunt/)",
|
||||
"Andris Nolendorfs (https://github.com/theashyster)",
|
||||
"Vladimir Agafonkin (https://github.com/mourner)",
|
||||
"Juuso Lehtinen (https://github.com/jleh)",
|
||||
"Mattias Bengtsson (https://github.com/moonlite/)",
|
||||
"Denis Rykov (http://github.com/drnextgis) ",
|
||||
"Jose manuel Vivó Arnal (Chema) (http://github.com/jmvivo) ",
|
||||
"Daniel Garcia (http://github.com/keyjote) ",
|
||||
"Mathieu Leplatre (https://github.com/leplatrem)",
|
||||
"Benny Lichtner (http://github.com/bennlich) ",
|
||||
"Christopher Fredén (https://github.com/icetan/)",
|
||||
"dpzaba (http://github.com/dpzaba) ",
|
||||
"Edward Mac Gillavry (http://github.com/emacgillavry) ",
|
||||
"Emil Goude (http://github.com/Stockholmsnovis) ",
|
||||
"Simon Legner (http://github.com/simon04) ",
|
||||
"Tom Blackmore (http://github.com/tablackmore) ",
|
||||
"Fabien NICOLLET (https://github.com/fnicollet)"
|
||||
],
|
||||
"description": "Smooth Proj4js integration with Leaflet",
|
||||
"moduleType": [
|
||||
"amd",
|
||||
"node"
|
||||
],
|
||||
"main": [
|
||||
"src/proj4leaflet.js"
|
||||
],
|
||||
"keywords": [
|
||||
"Leaflet",
|
||||
"Project4"
|
||||
],
|
||||
"license": "BSD-2-Clause",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"lib",
|
||||
"examples",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"proj4": "^2.3.14"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
var map = L.map('map').setView([44.97,-93.24], 11);
|
||||
|
||||
// MapQuest OSM Tiles
|
||||
|
||||
// Attribution (https://gist.github.com/mourner/1804938)
|
||||
var osmAttr = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
|
||||
mqTilesAttr = 'Tiles © <a href="https://www.mapquest.com/"" target="_blank">MapQuest</a> <img src="https://developer.mapquest.com/content/osm/mq_logo.png" />';
|
||||
|
||||
L.tileLayer(
|
||||
'https://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
|
||||
{
|
||||
attribution: 'Data by <a href="https://openstreetmap.org">OpenStreetMap contributors</a>'
|
||||
}
|
||||
)
|
||||
.addTo(map);
|
||||
|
||||
// GeoJSON layer (UTM15)
|
||||
proj4.defs('EPSG:26915', '+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs');
|
||||
|
||||
var geojson = {
|
||||
'type': 'Feature',
|
||||
'geometry': {
|
||||
'type': 'Point',
|
||||
'coordinates': [481650, 4980105],
|
||||
},
|
||||
'properties': {
|
||||
'name': 'University of Minnesota'
|
||||
},
|
||||
'crs': {
|
||||
'type': 'name',
|
||||
'properties': {
|
||||
'name': 'urn:ogc:def:crs:EPSG::26915'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
L.Proj.geoJson(geojson, {
|
||||
'pointToLayer': function(feature, latlng) {
|
||||
return L.marker(latlng).bindPopup(feature.properties.name);
|
||||
}
|
||||
}).addTo(map);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
var crs = new L.Proj.CRS('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs', {
|
||||
resolutions: [21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094,
|
||||
338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335,
|
||||
5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296, 0.16536491406316148],
|
||||
origin: [-2500000, 9045984]
|
||||
}
|
||||
);
|
||||
|
||||
var map = L.map('map', {
|
||||
crs: crs,
|
||||
center: [60, 10],
|
||||
zoom: 14
|
||||
});
|
||||
|
||||
L.tileLayer('https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBasis/MapServer/tile/{z}/{y}/{x}').addTo(map);
|
||||
|
||||
L.Proj.imageOverlay('https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheGraatone/MapServer/export' +
|
||||
'?bbox=220461.84450009145,6661489.40861154,222115.49415195954,6662415.4521056535' +
|
||||
'&size=1250,700&dpi=96&format=png24&transparent=true&bboxSR=25833&imageSR=25833&f=image',
|
||||
L.bounds([220461.84450009145, 6661489.40861154], [222115.49415195954, 6662415.4521056535])).addTo(map);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
<link rel="stylesheet" href="../../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../../src/proj4leaflet.js"></script>
|
||||
<script src="script_austria.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
var crs31258 = new L.Proj.CRS('EPSG::31258',
|
||||
"+proj=tmerc +lat_0=0 +lon_0=13.33333333333333 +k=1 +x_0=450000 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs",
|
||||
{
|
||||
origin: [-5172500.0, 5001000.0],
|
||||
resolutions: [
|
||||
400.00079375158754,
|
||||
200.000529167725,
|
||||
100.0002645838625,
|
||||
50,
|
||||
25,
|
||||
15.000052916772502,
|
||||
9.9999470832275,
|
||||
5.000105833545001,
|
||||
3.0001164168995005,
|
||||
2.5000529167725003,
|
||||
1.9999894166455001,
|
||||
1.4999259165184997,
|
||||
1.0001270002540006,
|
||||
0.5000635001270003,
|
||||
0.25003175006350015],
|
||||
});
|
||||
|
||||
var map = L.map('map', {
|
||||
crs: crs31258,
|
||||
});
|
||||
var attrib = "© KAGIS http://www.kagis.ktn.gv.at";
|
||||
var basemap = new L.TileLayer("http://gis.ktn.gv.at/arcgis/rest/services/tilecache/Ortho_2010_2012/MapServer/tile/{z}/{y}/{x}", {
|
||||
tileSize: 512,
|
||||
maxZoom: 14,
|
||||
minZoom: 0,
|
||||
attribution: attrib
|
||||
});
|
||||
|
||||
map.addLayer(basemap);
|
||||
map.setView([46.66411, 14.63602], 12);
|
||||
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
<link rel="stylesheet" href="../../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../../src/proj4leaflet.js"></script>
|
||||
<script src="script_auckland.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
|
||||
<script src="../../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../../src/proj4leaflet.js"></script>
|
||||
<script src="script_wellington.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
var crs = new L.Proj.CRS('EPSG:2193',
|
||||
'+proj=tmerc +lat_0=0 +lon_0=173 +k=0.9996 +x_0=1600000 +y_0=10000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
origin: [1565000, 6150000],
|
||||
resolutions: [
|
||||
264.583862501058,
|
||||
201.083735500804,
|
||||
132.291931250529,
|
||||
66.1459656252646,
|
||||
26.4583862501058,
|
||||
13.2291931250529,
|
||||
6.61459656252646,
|
||||
3.96875793751588,
|
||||
2.11667090000847,
|
||||
1.32291931250529,
|
||||
0.661459656252646,
|
||||
0.264583862501058,
|
||||
0.132291931250529
|
||||
]
|
||||
});
|
||||
|
||||
var map = new L.Map('map', {
|
||||
crs: crs,
|
||||
});
|
||||
|
||||
var tileUrl = 'https://maps.aucklandcouncil.govt.nz/ArcGIS/rest/services/Aerials/MapServer/tile/{z}/{y}/{x}',
|
||||
attrib = 'Auckland City Council © 2012',
|
||||
tilelayer = new L.TileLayer(tileUrl, {
|
||||
maxZoom: 12,
|
||||
minZoom: 0,
|
||||
attribution: attrib,
|
||||
});
|
||||
|
||||
map.addLayer(tilelayer);
|
||||
map.setView([-36.852931, 174.762057], 10);
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
var crs = new L.Proj.CRS('EPSG:2193',
|
||||
'+proj=tmerc +lat_0=0 +lon_0=173 +k=0.9996 +x_0=1600000 +y_0=10000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
origin: [-5099531.19635, 57089446.18],
|
||||
resolutions: [
|
||||
66.1459656252646,
|
||||
33.0729828126323,
|
||||
16.933367200067735,
|
||||
8.466683600033868,
|
||||
4.233341800016934,
|
||||
2.116670900008467,
|
||||
1.0583354500042335,
|
||||
0.5291677250021167,
|
||||
0.26458386250105836,
|
||||
0.13229193125052918,
|
||||
0.06614596562526459
|
||||
]
|
||||
});
|
||||
|
||||
var map = new L.Map('map', {
|
||||
crs: crs,
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false
|
||||
});
|
||||
|
||||
/*
|
||||
Wellington City Council's GIS web services are available under the following terms and conditions:
|
||||
https://wellington.govt.nz/about-wellington/maps/gis-data-terms-and-conditions
|
||||
|
||||
Aerial Imagery: Creative Commons Attribution 3.0 New Zealand Licence, https://creativecommons.org/licenses/by/3.0/nz/
|
||||
Additional services listed at https://wellington.govt.nz/~/media/maps/gis/ogc-services-list.pdf
|
||||
*/
|
||||
|
||||
var tileUrl = 'https://gis.wcc.govt.nz/arcgis/rest/services/Basemap/Aerial_Photo/MapServer/tile/{z}/{y}/{x}',
|
||||
attrib = 'Wellington City Council © 2012',
|
||||
tilelayer = new L.TileLayer(tileUrl, {
|
||||
maxZoom: 10,
|
||||
minZoom: 0,
|
||||
continuousWorld: true,
|
||||
attribution: attrib,
|
||||
tileSize: 512
|
||||
});
|
||||
|
||||
map.addLayer(tilelayer);
|
||||
map.setView([-41.288889, 174.777222], 5);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
var crs = new L.Proj.CRS('EPSG:3006',
|
||||
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
resolutions: [
|
||||
8192, 4096, 2048, 1024, 512, 256, 128,
|
||||
64, 32, 16, 8, 4, 2, 1, 0.5
|
||||
],
|
||||
origin: [0, 0],
|
||||
bounds: L.bounds([218128.7031, 6126002.9379], [1083427.2970, 7692850.9468])
|
||||
}),
|
||||
map = new L.Map('map', {
|
||||
crs: crs,
|
||||
});
|
||||
|
||||
L.tileLayer('https://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
|
||||
maxZoom: 14,
|
||||
minZoom: 0,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © <a href="http://www.kartena.se/">Kartena</a>'
|
||||
}).addTo(map);
|
||||
|
||||
map.setView([57.704, 11.965], 13);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
var crs = new L.Proj.CRS('EPSG:5181',
|
||||
'+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
resolutions: [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25],
|
||||
origin: [-30000, -60000],
|
||||
bounds: L.bounds([-30000, -60000], [494288, 464288])
|
||||
}),
|
||||
map = L.map('map', {
|
||||
crs: crs,
|
||||
continuousWorld: true,
|
||||
worldCopyJump: false,
|
||||
});
|
||||
|
||||
new L.TileLayer('http://i{s}.maps.daum-img.net/map/image/G03/i/1.20/L{z}/{y}/{x}.png', {
|
||||
maxZoom: 14,
|
||||
minZoom: 0,
|
||||
zoomReverse: true,
|
||||
subdomains: '0123',
|
||||
continuousWorld: true,
|
||||
attribution: 'ⓒ Daum',
|
||||
tms: true
|
||||
}).addTo(map);
|
||||
|
||||
//Gunsan Airport
|
||||
new L.marker([35.925937, 126.615810]).addTo(map);
|
||||
|
||||
map.setView([36.0, 127.0], 0);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
var crs = new L.Proj.CRS('EPSG:3006',
|
||||
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
resolutions: [
|
||||
8192, 4096, 2048, 1024, 512, 256, 128,
|
||||
64, 32, 16, 8, 4, 2, 1, 0.5
|
||||
],
|
||||
origin: [0, 0]
|
||||
}),
|
||||
map = new L.Map('map', {
|
||||
crs: crs,
|
||||
});
|
||||
|
||||
L.tileLayer.wms('https://geodatatest.havochvatten.se/geoservices/ows', {
|
||||
layers: 'hav-bakgrundskartor:hav-grundkarta',
|
||||
format: 'image/png',
|
||||
maxZoom: 14,
|
||||
minZoom: 0,
|
||||
attribution: '© OpenStreetMap contributors <a href="https://www.havochvatten.se/kunskap-om-vara-vatten/kartor-och-geografisk-information/karttjanster.html">Havs- och vattenmyndigheten (Swedish Agency for Marine and Water Management)</a>'
|
||||
}).addTo(map);
|
||||
|
||||
map.setView([55.8, 14.3], 3);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../../lib/leaflet/leaflet.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="../../lib/leaflet/leaflet.js"></script>
|
||||
<script src="../../lib/proj4-compressed.js"></script>
|
||||
<script src="../../src/proj4leaflet.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
Example using Sweden Lantmäteriet Topografisk Webbkarta
|
||||
https://opendata.lantmateriet.se/#apis
|
||||
*/
|
||||
|
||||
/*** INSERT YOUR LANTMÄTERIET API TOKEN BELOW ***/
|
||||
var token = '';
|
||||
|
||||
var crs = new L.Proj.CRS('EPSG:3006',
|
||||
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
|
||||
{
|
||||
resolutions: [
|
||||
4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8
|
||||
],
|
||||
origin: [-1200000.000000, 8500000.000000 ],
|
||||
bounds: L.bounds( [-1200000.000000, 8500000.000000], [4305696.000000, 2994304.000000])
|
||||
}),
|
||||
map = new L.Map('map', {
|
||||
crs: crs,
|
||||
continuousWorld: true,
|
||||
});
|
||||
|
||||
new L.TileLayer('https://api.lantmateriet.se/open/topowebb-ccby/v1/wmts/token/'+ token +'/?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=topowebb&STYLE=default&TILEMATRIXSET=3006&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fpng', {
|
||||
maxZoom: 9,
|
||||
minZoom: 0,
|
||||
continuousWorld: true,
|
||||
attribution: '© <a href="https://www.lantmateriet.se/en/">Lantmäteriet</a> Topografisk Webbkarta Visning, CCB',
|
||||
}).addTo(map);
|
||||
//Set view over Stockholm Södermalm
|
||||
map.setView([59.3167, 18.0667], 7);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
html, body {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,624 @@
|
|||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
|
||||
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
|
||||
.leaflet-container .leaflet-overlay-pane svg,
|
||||
.leaflet-container .leaflet-marker-pane img,
|
||||
.leaflet-container .leaflet-shadow-pane img,
|
||||
.leaflet-container .leaflet-tile-pane img,
|
||||
.leaflet-container img.leaflet-image-layer {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-tile {
|
||||
will-change: opacity;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
-o-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
will-change: transform;
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-zoom-animated {
|
||||
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
-o-transition: -o-transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline: 0;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-container a.leaflet-active {
|
||||
outline: 2px solid orange;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
.leaflet-control-zoom-out {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in {
|
||||
font-size: 22px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path {
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
margin: 0;
|
||||
}
|
||||
.leaflet-control-attribution,
|
||||
.leaflet-control-scale-line {
|
||||
padding: 0 5px;
|
||||
color: #333;
|
||||
}
|
||||
.leaflet-control-attribution a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.leaflet-control-attribution a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution,
|
||||
.leaflet-container .leaflet-control-scale {
|
||||
font-size: 11px;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 19px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
margin: 18px 0;
|
||||
}
|
||||
.leaflet-popup-tip-container {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 4px 4px 0 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
font: 16px/14px Tahoma, Verdana, sans-serif;
|
||||
color: #c3c3c3;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover {
|
||||
color: #999;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
||||
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip-container {
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
|
@ -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);
|
||||
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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 -
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
|
|
@ -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);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue