update readme (#140)

README.md

@@ -10,7 +10,9 @@ Vector tile rendering and labeling for [Leaflet](https://github.com/Leaflet/Leaf
     <img src="benchmark/example_2.png" width="400">
 </p>
 
-This project is a complete web map renderer - including quality label layout, pattern fills, and icons - in as simple as possible of an implementation. It's an alternative to renderers like [MapLibre GL JS](https://maplibre.org) in a fraction of the size.
+This project is a complete vector tile renderer - including quality label layout - in as simple as possible of an implementation. It's an alternative to renderers like [MapLibre GL JS](https://maplibre.org) in a fraction of the size.
+
+New projects starting from scratch should probably use MapLibre GL, but this library is useful as a drop-in replacement for raster basemaps in Leaflet, either using the [Protomaps API](https://protomaps.com/dashboard) or PMTiles on your own storage.
 
 ### Features
 
@@ -19,15 +21,13 @@ This project is a complete web map renderer - including quality label layout, pa
 * Can read normal Z/X/Y tile URLs or offline, static-hosted tile archives in [PMTiles format](https://github.com/protomaps/PMTiles)
 * Full out-of-the-box support for right-to-left and Indic/Brahmic writing systems
 * Configurable via plain JavaScript
-* Extensible API for defining your own symbolizers
+* (Advanced) Extensible API for defining your own symbolizers
 
 See the docs on [what protomaps-leaflet is, what protomaps-leaflet is not](https://protomaps.com/docs/protomaps-js#protomapsjs-is-not)
 
 ## Demos
 
 * [Simple Leaflet demo](https://protomaps.github.io/protomaps-leaflet/examples/leaflet.html)
-* ["Toner" black-and-white style](https://protomaps.github.io/protomaps-leaflet/examples/toner.html)
-* [Multi-language customization](https://protomaps.github.io/protomaps-leaflet/examples/multi_language.html)
 * [Satellite + labels demo](https://protomaps.github.io/protomaps-leaflet/examples/labels.html)
 * [GeoJSON between basemap and labels demo](https://protomaps.github.io/protomaps-leaflet/examples/sandwich.html)
 * [Map inset](https://protomaps.github.io/protomaps-leaflet/examples/inset.html)
@@ -39,15 +39,11 @@ See the docs on [what protomaps-leaflet is, what protomaps-leaflet is not](https
 <script src="https://unpkg.com/protomaps-leaflet@latest/dist/protomaps-leaflet.min.js"></script>
 <script>
     const map = L.map('map')
-    var layer = protomapsL.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.mvt'})
+    var layer = protomapsL.leafletLayer({url:'FILE.pmtiles OR ENDPOINT/{z}/{x}/{y}.mvt',theme:"light"})
     layer.addTo(map)
 </script>
 ```
 
-## Project Status
-
-The design is still evolving rapidly, so do not expect any kind of stable internal or external-facing API between minor versions. But please do report bugs and discuss requirements in the Issues.
-
 ## See Also
 * [Tangram](https://github.com/tangrams/tangram)
 * [KothicJS](https://github.com/kothic/kothic-js)

examples/static.html

@@ -6,8 +6,8 @@
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
-                width: 1024px;
-                height: 512px;
+                width: 600px;
+                height: 400px;
                 background-color:#eee;
                 display: block;
             }
@@ -21,8 +21,8 @@
        <button id="zoomout">-0.5</button>
        <script>
         let canvas = document.getElementById("map")
-        var zoom = 12
-        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"light"})
+        var zoom = 11
+        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"dark"})
         let center = {y:37.7658,x:-122.4221}
         map.drawCanvas(canvas,center,zoom)
         document.getElementById("zoom").innerHTML = zoom