mirror of
https://github.com/KevinMidboe/OverlappingGeoJSON_Panes_Template.git
synced 2025-10-29 09:40:29 +00:00
update / clean
This commit is contained in:
DanFinelli
@@ -93,11 +93,12 @@
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Tiles and loading location
|
|
||||||
|
|
||||||
var map = L.map('map')
|
var map = L.map('map')
|
||||||
|
|
||||||
|
|
||||||
|
// creating panes: the name is pane250. the zindex is 250. 250 is furthest from the user. 252 is the closest to the user. pointer events is always none (not sure why)
|
||||||
|
|
||||||
map.createPane('pane250');
|
map.createPane('pane250');
|
||||||
map.getPane('pane250').style.zIndex = 250;
|
map.getPane('pane250').style.zIndex = 250;
|
||||||
map.getPane('pane250').style.pointerEvents = 'none';
|
map.getPane('pane250').style.pointerEvents = 'none';
|
||||||
@@ -129,7 +130,7 @@ map.setView({ lat: 43.39707, lng: -63.77014}, 5);
|
|||||||
zIndex: 2,};
|
zIndex: 2,};
|
||||||
|
|
||||||
|
|
||||||
|
// style for the large geojson - the one that should be furthest from the viewrer: 250
|
||||||
|
|
||||||
|
|
||||||
var stylelargegeoj = {
|
var stylelargegeoj = {
|
||||||
@@ -155,6 +156,8 @@ map.setView({ lat: 43.39707, lng: -63.77014}, 5);
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// for the 251 geoj - inbetween
|
||||||
|
|
||||||
var stylemediumgeoj = {
|
var stylemediumgeoj = {
|
||||||
color:"#0033cc", opacity:".8", weight:".75",fillOpacity:".2"};
|
color:"#0033cc", opacity:".8", weight:".75",fillOpacity:".2"};
|
||||||
var stylemediumgeojmo = {
|
var stylemediumgeojmo = {
|
||||||
@@ -176,7 +179,7 @@ map.setView({ lat: 43.39707, lng: -63.77014}, 5);
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 252 - the closest geoj visible to user.
|
||||||
|
|
||||||
var stylesmallgeoj = {
|
var stylesmallgeoj = {
|
||||||
color:"#800000", opacity:".8", weight:".5",fillOpacity:".1"};
|
color:"#800000", opacity:".8", weight:".5",fillOpacity:".1"};
|
||||||
@@ -203,7 +206,7 @@ map.setView({ lat: 43.39707, lng: -63.77014}, 5);
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// loading geojsons - see sizes in the name. First the variable is set. Then ajax loads from raw github. Then we set the variable defined by its name = to the geojson layer which pulls the oneachfeature. The pane is also identified by the pane's given name 'pane250' which refers to the previous section where pane250 was set = to zindex of 250.
|
||||||
|
|
||||||
var LARGEGEOJ;
|
var LARGEGEOJ;
|
||||||
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/2-2a-27a.geojson",function(data){
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/2-2a-27a.geojson",function(data){
|
||||||
|
|||||||
BIN
Readme_image_view.png
Normal file
BIN
Readme_image_view.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
1
TestingOverlap_Archive/PANE_test_euEast.geojson
Normal file
1
TestingOverlap_Archive/PANE_test_euEast.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Atlas":"EastEurope","Plate":"eeu"},"geometry":{"type":"Polygon","coordinates":[[[32.08007812499999,61.3546135846894],[6.50390625,50.00773901463687],[3.1640625,43.96119063892024],[6.416015625,36.38591277287651],[43.2421875,47.517200697839414],[32.08007812499999,61.3546135846894]]]}}]}
|
||||||
1
TestingOverlap_Archive/PANE_test_euNorth.geojson
Normal file
1
TestingOverlap_Archive/PANE_test_euNorth.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Atlas":"NorthEurope","Plate":"neu"},"geometry":{"type":"Polygon","coordinates":[[[4.04296875,71.85622888185527],[44.82421875,71.85622888185527],[46.58203125,58.63121664342478],[9.667968749999998,44.715513732021336],[-6.15234375,62.34960927573042],[4.04296875,71.85622888185527]]]}}]}
|
||||||
1
TestingOverlap_Archive/PANE_test_euWest.geojson
Normal file
1
TestingOverlap_Archive/PANE_test_euWest.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Atlas":"WestEurope","Plate":"weu"},"geometry":{"type":"Polygon","coordinates":[[[4.5703125,55.87531083569679],[-13.359375,46.195042108660154],[2.109375,27.059125784374068],[21.4453125,48.45835188280866],[4.5703125,55.87531083569679]]]}}]}
|
||||||
3
TestingOverlap_Archive/README.md
Normal file
3
TestingOverlap_Archive/README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# overlapGeoJ
|
||||||
|
|
||||||
|
//Testing methods to sequentially layer overlapping geojsons
|
||||||
280
TestingOverlap_Archive/simpletest_index.html
Normal file
280
TestingOverlap_Archive/simpletest_index.html
Normal file
@@ -0,0 +1,280 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
|
||||||
|
<!-- !!!Change the title -->
|
||||||
|
<title>testing overlapping geoj</title>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
href="../img/brand-fav.png">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
<style>
|
||||||
|
body { margin:0; padding:0; }
|
||||||
|
#map {
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-custom {
|
||||||
|
background-color: #939393;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../tipuesearch/tipuesearch.css" >
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/sticky-footer.css">
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link href="../css/landing-page.css" rel="stylesheet">
|
||||||
|
<!-- Custom Fonts -->
|
||||||
|
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#myModal').modal('show');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#myModal .modal-dialog {width:350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12" style="padding:10px 10px 0px 10px">
|
||||||
|
<div id='map'class='custom-popup'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Text -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Footer
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-12" >
|
||||||
|
<ul class="list-inline">
|
||||||
|
<li>
|
||||||
|
<a href="../index.html">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-divider">⋅</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="../menu.html">Menu</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-divider">⋅</li>
|
||||||
|
<li>
|
||||||
|
<a href="../about.html">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-divider">⋅</li>
|
||||||
|
<li>
|
||||||
|
<a href="../contact.html">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="copyright text-muted small">Copyright © 2016 Leventhal Map Center. All Rights Reserved</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>-->
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tiles and loading location
|
||||||
|
|
||||||
|
|
||||||
|
// !!!Change setView location if needed (center) - http://leafletjs.com/examples/quick-start-example.html
|
||||||
|
|
||||||
|
var map = L.map('map').setView([42.35245, -71.06489], 9);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
minZoom: 12,
|
||||||
|
maxZoom: 20,
|
||||||
|
opacity: 1.0,
|
||||||
|
tms: true,
|
||||||
|
zIndex: 2,};
|
||||||
|
|
||||||
|
|
||||||
|
// !!!Change style to fit thumbnail (variety, use hexcode ex color:#009933)
|
||||||
|
// This styles the color, tranparency, and hover
|
||||||
|
var style = {
|
||||||
|
color:"green", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo = {
|
||||||
|
color:"green", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
var style2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
// a popup showing the layer name, and polygon styles
|
||||||
|
function onEachFeature(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong> " + feature.properties.Plate + "</strong></h1> From: <em>" + feature.properties.Atlas + "</em>" +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeature2(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong> " + feature.properties.Plate + "</strong></h1> From: <em>" + feature.properties.Atlas + "</em>" +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style2);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo2);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style2);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// !!!Change .geoJson location (github, boston atlas footprint, raw URL)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var geotestlayersouth;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect33.geojson",function(data){
|
||||||
|
geotestlayersouth = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var geotestlayermiddle;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect.geojson",function(data){
|
||||||
|
geotestlayermiddle = L.geoJson(data, {onEachFeature: onEachFeature2} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var geotestlayernorth;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect2overlap.geojson",function(data){
|
||||||
|
geotestlayernorth = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//var OrderLayers = ['geotestlayernorth', 'geotestlayersouth', 'geotestlayermiddle']
|
||||||
|
|
||||||
|
//for(var i = 0 , len = OrderLayers.length; i < len; i++){
|
||||||
|
//eval(OrderLayers[i]).bringToFront();
|
||||||
|
|
||||||
|
|
||||||
|
//geotestlayernorth.bringToFront();
|
||||||
|
//geotestlayersouth.bringToFront();
|
||||||
|
//geotestlayermiddle.bringToFront();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
235
TestingOverlap_Archive/simpletest_index_PANE_CONVERSION.html
Normal file
235
TestingOverlap_Archive/simpletest_index_PANE_CONVERSION.html
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>testing overlapping geoj</title>
|
||||||
|
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
href="../img/brand-fav.png">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://unpkg.com/leaflet@1.0.1/dist/leaflet.js'></script>
|
||||||
|
<link href='https://unpkg.com/leaflet@1.0.1/dist/leaflet.css' rel='stylesheet' />
|
||||||
|
<style>
|
||||||
|
body { margin:0; padding:0; }
|
||||||
|
#map {
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-custom {
|
||||||
|
background-color: #939393;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../tipuesearch/tipuesearch.css" >
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../css/sticky-footer.css">
|
||||||
|
<!-- Custom CSS -->
|
||||||
|
<link href="../css/landing-page.css" rel="stylesheet">
|
||||||
|
<!-- Custom Fonts -->
|
||||||
|
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#myModal').modal('show');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#myModal .modal-dialog {width:350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12" style="padding:10px 10px 0px 10px">
|
||||||
|
<div id='map'class='custom-popup'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Text -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tiles and loading location
|
||||||
|
|
||||||
|
var map = L.map('map')
|
||||||
|
|
||||||
|
|
||||||
|
map.createPane('south');
|
||||||
|
map.getPane('south').style.zIndex = 401;
|
||||||
|
map.getPane('south').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
map.createPane('middle');
|
||||||
|
map.getPane('middle').style.zIndex = 402;
|
||||||
|
map.getPane('middle').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
map.createPane('north');
|
||||||
|
map.getPane('north').style.zIndex = 403;
|
||||||
|
map.getPane('north').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
map.setView({ lat: 42.35245, lng: -71.06489}, 9);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
minZoom: 12,
|
||||||
|
maxZoom: 20,
|
||||||
|
opacity: 1.0,
|
||||||
|
tms: true,
|
||||||
|
zIndex: 2,};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// !!!Change style to fit thumbnail (variety, use hexcode ex color:#009933)
|
||||||
|
// This styles the color, tranparency, and hover
|
||||||
|
var style = {
|
||||||
|
color:"green", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo = {
|
||||||
|
color:"green", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
var style2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
// a popup showing the layer name, and polygon styles
|
||||||
|
function onEachFeature(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong> " + feature.properties.Plate + "</strong></h1> From: <em>" + feature.properties.Atlas + "</em>" +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeature2(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong> " + feature.properties.Plate + "</strong></h1> From: <em>" + feature.properties.Atlas + "</em>" +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style2);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo2);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style2);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var geotestlayersouth;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect33.geojson",function(data){
|
||||||
|
geotestlayersouth = L.geoJson(data, {onEachFeature: onEachFeature, pane: 'south'}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var geotestlayermiddle;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect.geojson",function(data){
|
||||||
|
geotestlayermiddle = L.geoJson(data, {onEachFeature: onEachFeature2, pane: 'middle'}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var geotestlayernorth;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/simpletestcorrect2overlap.geojson",function(data){
|
||||||
|
geotestlayernorth = L.geoJson(data, {onEachFeature: onEachFeature, pane: 'north'}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
TestingOverlap_Archive/simpletestcorrect.geojson
Normal file
1
TestingOverlap_Archive/simpletestcorrect.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Plate":"mid","Atlas":"middle"},"geometry":{"type":"Polygon","coordinates":[[[-71.18865966796875,42.466018925787495],[-71.4276123046875,42.30575300304638],[-71.14471435546875,42.218347726793304],[-70.82611083984375,42.293564192170095],[-71.10626220703124,42.44980808481614],[-71.18865966796875,42.466018925787495]]]}},{"type":"Feature","properties":{"Plate":"right","Atlas":"righty"},"geometry":{"type":"Polygon","coordinates":[[[-70.85906982421875,42.50450285299051],[-71.04034423828125,42.259016415705766],[-70.8892822265625,42.09210825254959],[-70.55694580078125,42.26917949243506],[-70.85906982421875,42.50450285299051]]]}},{"type":"Feature","properties":{"Plate":"left","Atlas":"lefty"},"geometry":{"type":"Polygon","coordinates":[[[-71.53472900390625,42.56926437219384],[-71.29852294921875,42.45791402988027],[-71.24359130859375,42.147114459220994],[-71.5869140625,42.220381783720605],[-71.53472900390625,42.56926437219384]]]}},{"type":"Feature","properties":{"Plate":"big","Atlas":"biggie"},"geometry":{"type":"Polygon","coordinates":[[[-71.87805175781249,42.75104599038353],[-71.98516845703125,41.89818843043047],[-70.45257568359375,41.89409955811395],[-70.4937744140625,42.77322729247907],[-71.87805175781249,42.75104599038353]]]}}]}
|
||||||
1
TestingOverlap_Archive/simpletestcorrect2overlap.geojson
Normal file
1
TestingOverlap_Archive/simpletestcorrect2overlap.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Plate":"Northeast","ds":"NE"},"geometry":{"type":"Polygon","coordinates":[[[-69.9774169921875,43.90185050527358],[-71.8121337890625,43.07691312608711],[-70.806884765625,42.3016903282445],[-69.43359375,42.24071874922666],[-69.9774169921875,43.90185050527358]]]}}]}
|
||||||
1
TestingOverlap_Archive/simpletestcorrect33.geojson
Normal file
1
TestingOverlap_Archive/simpletestcorrect33.geojson
Normal file
@@ -0,0 +1 @@
|
|||||||
|
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Plate":"South","Atlas":"S"},"geometry":{"type":"Polygon","coordinates":[[[-69.75769042968749,42.35042512243457],[-70.3729248046875,42.41940144722477],[-71.12960815429686,42.31692400697031],[-71.43585205078125,41.875696393231],[-70.7080078125,41.693424216151314],[-69.75769042968749,42.35042512243457]]]}}]}
|
||||||
199
TestingOverlap_Archive/test1_DesBarres.html
Normal file
199
TestingOverlap_Archive/test1_DesBarres.html
Normal file
@@ -0,0 +1,199 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Atlas index with menu</title>
|
||||||
|
|
||||||
|
<!-- Mapbox.js -->
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
body { margin:0; padding:0;
|
||||||
|
}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
.leaflet-control-zoom {
|
||||||
|
left: 9px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.maptext {
|
||||||
|
position:fixed;
|
||||||
|
font-size:24px;
|
||||||
|
color:white;
|
||||||
|
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
|
||||||
|
left:50%;
|
||||||
|
top:10%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.menu-ui {
|
||||||
|
background:#fff;
|
||||||
|
position:absolute;
|
||||||
|
top:20px;right:10px;
|
||||||
|
z-index:1;
|
||||||
|
border-radius:3px;
|
||||||
|
width:60px;
|
||||||
|
border:1px solid rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.menu-ui a {
|
||||||
|
font-size:14px;
|
||||||
|
color:#212121;
|
||||||
|
display:block;
|
||||||
|
margin:0;padding:0;
|
||||||
|
padding:2.5px;
|
||||||
|
text-decoration:none;
|
||||||
|
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
|
||||||
|
border-bottom:1px solid rgba(0,0,0,0.25);
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.menu-ui a:first-child {
|
||||||
|
border-radius:3px 3px 0 0;
|
||||||
|
}
|
||||||
|
.menu-ui a:last-child {
|
||||||
|
border:none;
|
||||||
|
border-radius:0 0 3px 3px;
|
||||||
|
}
|
||||||
|
.menu-ui a:hover {
|
||||||
|
background:#e9e8e8;
|
||||||
|
color:#212121;
|
||||||
|
padding:8px;
|
||||||
|
}
|
||||||
|
.menu-ui a.active {
|
||||||
|
background:#3887BE;
|
||||||
|
color:#FFF;
|
||||||
|
}
|
||||||
|
.menu-ui a.active:hover {
|
||||||
|
background:#3074a4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id='menu-ui' class='menu-ui'></nav>
|
||||||
|
<div class='custom-popup' id='map'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class='maptext'>
|
||||||
|
<h3>Atlantic Neptune, Volume 1, Part 1a</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZXZhbnRob3JuYmVycnkiLCJhIjoiemVQMDBUdyJ9.aK0EfwMvPgquXMmxLf73lw';
|
||||||
|
// !!!Change setView location if needed - http://leafletjs.com/examples/quick-start-example.html
|
||||||
|
// Tiles and loading location
|
||||||
|
var tiles = L.tileLayer('http://b.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
|
||||||
|
transparency: true,
|
||||||
|
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>. Representative of the holdings at <a href="http://maps.bpl.org" target="_blank"><strong>The Leventhal Map Center</strong></a>.'}
|
||||||
|
);
|
||||||
|
var map = L.map('map', {
|
||||||
|
|
||||||
|
})
|
||||||
|
.addLayer(tiles)
|
||||||
|
.setView([46.06942, -63.68774], 6);
|
||||||
|
// *Change max and min zoom levels
|
||||||
|
var layers = document.getElementById('menu-ui');
|
||||||
|
|
||||||
|
var style1 = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"2",fillOpacity:".3",};
|
||||||
|
var style1mo = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
// this function creates a popup showing the layer name
|
||||||
|
function onEachFeature1(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <em>" + feature.properties.title + "</em> from The Atlantic Neptune, Volume 1, Part 1a" + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
|
||||||
|
layer.setStyle(style1);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(style1mo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style1);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-6.geojson",function(data){
|
||||||
|
addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '6', -2);
|
||||||
|
});
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-8.geojson",function(data){
|
||||||
|
addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '8', -1);
|
||||||
|
});
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-13.geojson",function(data){
|
||||||
|
addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '13', 0);
|
||||||
|
});
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-15.geojson",function(data){
|
||||||
|
addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '15', 1);
|
||||||
|
});
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-10.geojson",function(data){
|
||||||
|
addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '10', 2);
|
||||||
|
});
|
||||||
|
|
||||||
|
function addLayer(layer, name, zIndex){
|
||||||
|
layer
|
||||||
|
.setZIndex(zIndex)
|
||||||
|
var link = document.createElement('a');
|
||||||
|
link.href = '#';
|
||||||
|
link.className = '';
|
||||||
|
link.innerHTML = name;
|
||||||
|
link.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (map.hasLayer(layer)) {
|
||||||
|
map.removeLayer(layer);
|
||||||
|
this.className = '';
|
||||||
|
} else {
|
||||||
|
map.addLayer(layer);
|
||||||
|
this.className = 'active';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
layers.appendChild(link);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
TestingOverlap_Archive/test1_DesBarres_PANES.html
Normal file
197
TestingOverlap_Archive/test1_DesBarres_PANES.html
Normal file
@@ -0,0 +1,197 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<title>Custom Icons Tutorial - Leaflet</title>
|
||||||
|
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
|
||||||
|
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- allows to draw geojsons from github -->
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id='map'></div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="http://leafletjs.com/examples/map-panes/eu-countries.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// DEFINING MAP VAR
|
||||||
|
|
||||||
|
var map = L.map('map');
|
||||||
|
|
||||||
|
// CREATING PANES to layer
|
||||||
|
|
||||||
|
map.createPane('labels');
|
||||||
|
map.getPane('labels').style.zIndex = 653;
|
||||||
|
map.getPane('labels').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
map.createPane('eastern');
|
||||||
|
map.getPane('eastern').style.zIndex = 651;
|
||||||
|
map.getPane('eastern').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
map.createPane('northern');
|
||||||
|
map.getPane('northern').style.zIndex = 650;
|
||||||
|
map.getPane('northern').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
map.createPane('western');
|
||||||
|
map.getPane('western').style.zIndex = 652;
|
||||||
|
map.getPane('western').style.pointerEvents = 'none';
|
||||||
|
|
||||||
|
|
||||||
|
// base map?
|
||||||
|
|
||||||
|
var cartodbAttribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>';
|
||||||
|
|
||||||
|
var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
|
||||||
|
attribution: cartodbAttribution
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// labels
|
||||||
|
|
||||||
|
var positronLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
|
||||||
|
attribution: cartodbAttribution,
|
||||||
|
pane: 'labels'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// EU geojson?
|
||||||
|
|
||||||
|
geojson = L.geoJson(euCountries).addTo(map);
|
||||||
|
|
||||||
|
geojson.eachLayer(function (layer) {
|
||||||
|
layer.bindPopup(layer.feature.properties.name);
|
||||||
|
|
||||||
|
//
|
||||||
|
|
||||||
|
map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 3);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// STYLES FOR GEOJSONS
|
||||||
|
|
||||||
|
var styleeast = {
|
||||||
|
color:"green", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var styleeastmo = {
|
||||||
|
color:"black", opacity:".8", weight:"10", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
var stylenorth = {
|
||||||
|
color:"blue", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylenorthmo = {
|
||||||
|
color:"black", opacity:".8", weight:"10", fillOpacity:".5"};
|
||||||
|
|
||||||
|
var stylewest = {
|
||||||
|
color:"yellow", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylewestmo = {
|
||||||
|
color:"black", opacity:".8", weight:"10", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function onEachFeatureeast(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong>Plate " + feature.properties.plate + "</strong></h1> From: <em>" + feature.properties.atlas + "</em>");
|
||||||
|
layer.setStyle(styleeast);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(styleeastmo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(styleeast);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// FUNCTION FOR GEOJSONS
|
||||||
|
|
||||||
|
function onEachFeaturenorth(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong>Plate " + feature.properties.plate + "</strong></h1> From: <em>" + feature.properties.atlas + "</em>");
|
||||||
|
layer.setStyle(stylenorth);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylenorthmo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(stylenorth);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function onEachFeaturewest(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong>Plate " + feature.properties.plate + "</strong></h1> From: <em>" + feature.properties.atlas + "</em>");
|
||||||
|
layer.setStyle(stylewest);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylewestmo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(stylewest);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// LOADING GEOJSONS
|
||||||
|
|
||||||
|
|
||||||
|
var geojsoneastern;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/PANE_test_euEast.geojson",function(data){
|
||||||
|
geojsoneastern = L.geoJson(data, {onEachFeature: onEachFeatureeast, pane: 'eastern'
|
||||||
|
}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var geojsonnorthern;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/PANE_test_euNorth.geojson",function(data){
|
||||||
|
geojsonnorthern = L.geoJson(data, {onEachFeature: onEachFeaturenorth, pane: 'northern'
|
||||||
|
}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var geojsonwestern;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/DanFinelli/overlapGeoJ/master/PANE_test_euWest.geojson",function(data){
|
||||||
|
geojsonwestern = L.geoJson(data, {onEachFeature: onEachFeaturewest, pane: 'western'
|
||||||
|
}).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,219 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>Testing Overlapping geoj</title>
|
||||||
|
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
href="../img/brand-fav.png">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
<style>
|
||||||
|
body { margin:0; padding:0; }
|
||||||
|
#map {
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-custom {
|
||||||
|
background-color: #939393;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#myModal').modal('show');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#myModal .modal-dialog {width:350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12" style="padding:10px 10px 0px 10px">
|
||||||
|
<div id='map'class='custom-popup'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Text -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var map = L.map('map').setView([42.35245, -71.06489], 5);
|
||||||
|
|
||||||
|
|
||||||
|
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
minZoom: 12,
|
||||||
|
maxZoom: 20,
|
||||||
|
opacity: 1.0,
|
||||||
|
tms: true,
|
||||||
|
zIndex: 2,};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var style = {
|
||||||
|
color:"green", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo = {
|
||||||
|
color:"green", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
var style2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
var stylelarge = {
|
||||||
|
color:"blue", opacity:".8", weight:"5",fillOpacity:".05"};
|
||||||
|
var stylemolarge = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
function onEachFeature(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeature2(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style2);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo2);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style2);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeaturelarge(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(stylelarge);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemolarge);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(stylelarge);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var oneasix;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-6.geojson",function(data){
|
||||||
|
oneasix = L.geoJson(data, {onEachFeature: onEachFeaturelarge} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneaeight;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-8.geojson",function(data){
|
||||||
|
oneaeight = L.geoJson(data, {onEachFeature: onEachFeaturelarge} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneathirteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-13.geojson",function(data){
|
||||||
|
oneathirteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebnineteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-19.geojson",function(data){
|
||||||
|
onebnineteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebtwentytwo;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-22.geojson",function(data){
|
||||||
|
onebfifteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneaten;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-10.geojson",function(data){
|
||||||
|
oneten = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneafifteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-15.geojson",function(data){
|
||||||
|
onefifteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebtwentyfive;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-25.geojson",function(data){
|
||||||
|
onebtwentyfive = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map).bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
207
TestingOverlap_Archive/test1_DesBarres_usingFrontmethod.html
Normal file
207
TestingOverlap_Archive/test1_DesBarres_usingFrontmethod.html
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Atlas index with menu</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
body { margin:0; padding:0;
|
||||||
|
}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
.leaflet-control-zoom {
|
||||||
|
left: 9px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.maptext {
|
||||||
|
position:fixed;
|
||||||
|
font-size:24px;
|
||||||
|
color:white;
|
||||||
|
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
|
||||||
|
left:50%;
|
||||||
|
top:10%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.menu-ui {
|
||||||
|
background:#fff;
|
||||||
|
position:absolute;
|
||||||
|
top:20px;right:10px;
|
||||||
|
z-index:1;
|
||||||
|
border-radius:3px;
|
||||||
|
width:60px;
|
||||||
|
border:1px solid rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.menu-ui a {
|
||||||
|
font-size:14px;
|
||||||
|
color:#212121;
|
||||||
|
display:block;
|
||||||
|
margin:0;padding:0;
|
||||||
|
padding:2.5px;
|
||||||
|
text-decoration:none;
|
||||||
|
font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
|
||||||
|
border-bottom:1px solid rgba(0,0,0,0.25);
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.menu-ui a:first-child {
|
||||||
|
border-radius:3px 3px 0 0;
|
||||||
|
}
|
||||||
|
.menu-ui a:last-child {
|
||||||
|
border:none;
|
||||||
|
border-radius:0 0 3px 3px;
|
||||||
|
}
|
||||||
|
.menu-ui a:hover {
|
||||||
|
background:#e9e8e8;
|
||||||
|
color:#212121;
|
||||||
|
padding:8px;
|
||||||
|
}
|
||||||
|
.menu-ui a.active {
|
||||||
|
background:#3887BE;
|
||||||
|
color:#FFF;
|
||||||
|
}
|
||||||
|
.menu-ui a.active:hover {
|
||||||
|
background:#3074a4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav id='menu-ui' class='menu-ui'></nav>
|
||||||
|
<div class='custom-popup' id='map'>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class='maptext'>
|
||||||
|
<h3>Atlantic Neptune, Volume 1, Part 1a</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZXZhbnRob3JuYmVycnkiLCJhIjoiemVQMDBUdyJ9.aK0EfwMvPgquXMmxLf73lw';
|
||||||
|
// !!!Change setView location if needed - http://leafletjs.com/examples/quick-start-example.html
|
||||||
|
// Tiles and loading location
|
||||||
|
var tiles = L.tileLayer('http://b.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
|
||||||
|
transparency: true,
|
||||||
|
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>. Representative of the holdings at <a href="http://maps.bpl.org" target="_blank"><strong>The Leventhal Map Center</strong></a>.'}
|
||||||
|
);
|
||||||
|
var map = L.map('map', {
|
||||||
|
|
||||||
|
})
|
||||||
|
.addLayer(tiles)
|
||||||
|
.setView([46.06942, -63.68774], 6);
|
||||||
|
|
||||||
|
var layers = document.getElementById('menu-ui');
|
||||||
|
|
||||||
|
var style1 = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"2",fillOpacity:".3",};
|
||||||
|
var style1mo = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
// this function creates a popup showing the layer name
|
||||||
|
function onEachFeature1(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <em>" + feature.properties.title + "</em> from The Atlantic Neptune, Volume 1, Part 1a" + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
|
||||||
|
layer.setStyle(style1);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(style1mo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style1);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var six;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-6.geojson",function(data){
|
||||||
|
six = addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '6') .bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var eight;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-8.geojson",function(data){
|
||||||
|
eight = addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '8') .bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var thirteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-13.geojson",function(data){
|
||||||
|
thirteen = addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '13') .bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var fifteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-15.geojson",function(data){
|
||||||
|
fifteen = addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '15') .bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
var ten;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-10.geojson",function(data){
|
||||||
|
ten = addLayer(L.geoJson(data, {onEachFeature: onEachFeature1} ), '10') .bringToFront;
|
||||||
|
});
|
||||||
|
|
||||||
|
function addLayer(layer, name, zIndex){
|
||||||
|
layer
|
||||||
|
|
||||||
|
var link = document.createElement('a');
|
||||||
|
link.href = '#';
|
||||||
|
link.className = '';
|
||||||
|
link.innerHTML = name;
|
||||||
|
link.onclick = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
if (map.hasLayer(layer)) {
|
||||||
|
map.removeLayer(layer);
|
||||||
|
this.className = '';
|
||||||
|
} else {
|
||||||
|
map.addLayer(layer);
|
||||||
|
this.className = 'active';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
layers.appendChild(link);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
240
TestingOverlap_Archive/test1_DesBarres_zindex.html
Normal file
240
TestingOverlap_Archive/test1_DesBarres_zindex.html
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
|
||||||
|
<title>Testing Overlapping geoj</title>
|
||||||
|
|
||||||
|
<link rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
href="../img/brand-fav.png">
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
<style>
|
||||||
|
body { margin:0; padding:0; }
|
||||||
|
#map {
|
||||||
|
height:700px;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
.btn-custom {
|
||||||
|
background-color: hsl(197, 46%, 41%) !important;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#489abb", endColorstr="#387d98");
|
||||||
|
background-image: -khtml-gradient(linear, left top, left bottom, from(#489abb), to(#387d98));
|
||||||
|
background-image: -moz-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -ms-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #489abb), color-stop(100%, #387d98));
|
||||||
|
background-image: -webkit-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: -o-linear-gradient(top, #489abb, #387d98);
|
||||||
|
background-image: linear-gradient(#489abb, #387d98);
|
||||||
|
border-color: #387d98 #387d98 hsl(197, 46%, 38.5%);
|
||||||
|
color: #fff !important;
|
||||||
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label-custom {
|
||||||
|
background-color: #939393;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){
|
||||||
|
$('#myModal').modal('show');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@media screen and (min-width: 768px) {
|
||||||
|
#myModal .modal-dialog {width:350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="onesixzindex" style="position: relative; z-index: 2;">
|
||||||
|
|
||||||
|
var oneasix;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-6.geojson",function(data){
|
||||||
|
oneasix = L.geoJson(data, {onEachFeature: onEachFeaturelarge} ).addTo(map);
|
||||||
|
});
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12" style="padding:10px 10px 0px 10px">
|
||||||
|
<div id='map'class='custom-popup'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Bottom Text -->
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var map = L.map('map').setView([42.35245, -71.06489], 5);
|
||||||
|
|
||||||
|
|
||||||
|
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',{
|
||||||
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
minZoom: 12,
|
||||||
|
maxZoom: 20,
|
||||||
|
opacity: 1.0,
|
||||||
|
tms: true,
|
||||||
|
zIndex: 2,};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var style = {
|
||||||
|
color:"green", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo = {
|
||||||
|
color:"green", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
|
||||||
|
var style2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var stylemo2 = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
var stylelarge = {
|
||||||
|
color:"blue", opacity:".8", weight:"5",fillOpacity:".05"};
|
||||||
|
var stylemolarge = {
|
||||||
|
color:"blue", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
|
||||||
|
function onEachFeature(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number +
|
||||||
|
' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeature2(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(style2);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemo2);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style2);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function onEachFeaturelarge(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is Volume " + feature.properties.volume + ", Part " + feature.properties.part + ",</h1> Number " + feature.properties.number + ' </br></br><a class="btn btn-custom btn-sm" href="' + layer.feature.properties.url + '" role="button" target="_blank">view original<\/a>');
|
||||||
|
layer.setStyle(stylelarge);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(stylemolarge);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(stylelarge);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var oneaeight;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-8.geojson",function(data){
|
||||||
|
oneaeight = L.geoJson(data, {onEachFeature: onEachFeaturelarge} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneathirteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-13.geojson",function(data){
|
||||||
|
oneathirteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebnineteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-19.geojson",function(data){
|
||||||
|
onebnineteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebtwentytwo;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-22.geojson",function(data){
|
||||||
|
onebfifteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneaten;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-10.geojson",function(data){
|
||||||
|
oneten = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var oneafifteen;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1a-15.geojson",function(data){
|
||||||
|
onefifteen = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
var onebtwentyfive;
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Des-Barres-findingaid/master/maps/1-1b-25.geojson",function(data){
|
||||||
|
onebtwentyfive = L.geoJson(data, {onEachFeature: onEachFeature} ).addTo(map);
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
109
TestingOverlap_Archive/testAtlasDIY.html
Normal file
109
TestingOverlap_Archive/testAtlasDIY.html
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Single atlas index</title>
|
||||||
|
|
||||||
|
<!-- Mapbox.js -->
|
||||||
|
<meta name="viewport" content="initial-scale=1.0, initial-scale=1.0">
|
||||||
|
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
|
||||||
|
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body { margin:0; padding:0;
|
||||||
|
}
|
||||||
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
||||||
|
.leaflet-control-zoom {
|
||||||
|
left: 9px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.custom-popup .leaflet-popup-content-wrapper a {
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='map'class='custom-popup'></div>
|
||||||
|
<script>
|
||||||
|
L.mapbox.accessToken = 'pk.eyJ1IjoiZXZhbnRob3JuYmVycnkiLCJhIjoiemVQMDBUdyJ9.aK0EfwMvPgquXMmxLf73lw';
|
||||||
|
// !!!Change setView location if needed - http://leafletjs.com/examples/quick-start-example.html
|
||||||
|
// Tiles and loading location
|
||||||
|
var tiles = L.tileLayer('http://b.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
|
||||||
|
transparency: true,
|
||||||
|
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>. Representative of the holdings at <a href="http://maps.bpl.org" target="_blank"><strong>The Leventhal Map Center</strong></a>.'}
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
var map = L.map('map', {
|
||||||
|
maxZoom: 19,
|
||||||
|
minZoom: 12,
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.addLayer(tiles)
|
||||||
|
.setView([42.35747, -71.05957], 14);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var layer1 = L.map('map2', {
|
||||||
|
maxZoom: 19,
|
||||||
|
minZoom: 12,
|
||||||
|
zIndex: 401
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// *Change max and min zoom levels
|
||||||
|
var style1861 = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"2",fillOpacity:".3"};
|
||||||
|
var style1861mo = {
|
||||||
|
color:"#4ba8a7", opacity:".8", weight:"4", fillOpacity:".5"};
|
||||||
|
// this function creates a popup showing the layer name
|
||||||
|
function onEachFeature(feature, layer) {
|
||||||
|
{
|
||||||
|
layer.bindPopup("This is <strong>Plate " + feature.properties.plate + "</strong></h1> From: <em>" + feature.properties.atlas + "</em>");
|
||||||
|
layer.setStyle(style1861);
|
||||||
|
(function (layer, properties){
|
||||||
|
layer.on("mouseover", function(e){
|
||||||
|
layer.setStyle(style1861mo);
|
||||||
|
});
|
||||||
|
layer.on("mouseout", function(e){
|
||||||
|
layer.setStyle(style1861);
|
||||||
|
});
|
||||||
|
})(layer, feature.properties);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// !!!Change location of index .geojson
|
||||||
|
$.getJSON("https://raw.githubusercontent.com/ect123/Boston-Atlas-Footprints/master/index/index-bromley-1938-bostonproper.geojson", function(data){
|
||||||
|
L.geoJson(data, {onEachFeature: onEachFeature}).addTo(layer1);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||||
|
ga('create', 'UA-47313789-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user