Demonstrates loading data from a Carto table and creating a GeoJSON vector layer in a Leaflet Map.
Built with blockbuilder.org
forked from clhenrick's block: Leaflet with a Carto Layer I
Last active
September 21, 2017 22:46
-
-
Save clhenrick/4c0bfdf01e1d1d48d694f937afae757b to your computer and use it in GitHub Desktop.
Leaflet Active Area Bug
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| #map { | |
| height: 100%; | |
| } | |
| div.active-area, | |
| .viewport { | |
| position: absolute; | |
| top: 50px; | |
| right: 50px; | |
| left: 300px; | |
| height: 400px; | |
| border: 2px solid black; | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div class="active-area"></div> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> | |
| <script src="https://unpkg.com/[email protected]/src/leaflet.activearea.js"></script> | |
| <script> | |
| var Paris = [48.85346, 2.34956], | |
| London = [51.505, -0.09], | |
| popupOptions = { | |
| autoPan: true, | |
| keepInView: true | |
| }; | |
| var map = new L.Map('map', { inertia: false }) | |
| .setActiveArea('active-area') | |
| .setView(Paris, 13); | |
| L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}@2x.png', { | |
| attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment