Skip to content

Instantly share code, notes, and snippets.

@NelsonMinar

NelsonMinar/README.md

Forked from ZJONSSON/index.html
Last active February 9, 2017 16:31
Download ZIP

Revisions

  1. NelsonMinar revised this gist May 25, 2013. 1 changed file with 47 additions and 1 deletion.
    48 changes: 47 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,12 +35,23 @@
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.4 }
    path.building { stroke: #f00; fill: #f00; }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}


    button#demake {
    font-size: 12px; padding: 7px 14px;
    color: #ffffff; background: #b42;
    border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;
    border: 3px solid #ffffff;
    position: absolute; top: 20px; right: 20px; z-index: 3;
    }
    button.animating { background: #444 !important; }

    </style>

    </head><body>

    <div id="map"></div>

    <button id="demake">DEMAKE</button>

    <script type="text/javascript">

    @@ -130,5 +141,40 @@
    style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind]; }
    }).addTo(map);


    var animating = false;
    var transformParser = /translate\((-?\d+),(-?\d+)\)/;
    function step() {
    var paths = document.getElementsByTagName("path");
    for (var i = 0; i < 3 * Math.floor(Math.sqrt(paths.length-1)); i++) {
    var r = rando(0, paths.length-1);
    if (!paths[r]) { continue; }
    var dx = rando(-5, 5), dy = rando(-5, 5);
    var t = paths[r].getAttribute("transform");
    if (t) {
    var p = transformParser.exec(t);
    if (!p) { console.log(t); continue; }
    dx += parseInt(p[1]);
    dy += parseInt(p[2]);
    }

    paths[r].setAttribute("transform", "translate(" + dx + "," + dy + ")");
    }

    if (animating) {
    requestAnimationFrame(step);
    }
    }
    function toggleAnimation() {
    animating = !animating;
    d3.select("button#demake").classed("animating", animating);
    if (animating) {
    requestAnimationFrame(step);
    } else {
    d3.selectAll("path").attr("transform", null);
    }
    }
    d3.select("button#demake").on("click", toggleAnimation);

    </script>
    </body></html>
  2. NelsonMinar revised this gist May 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@ whole [Prettymaps](http://prettymaps.stamen.com/) crew.
    [Bagdad Cafe, CA](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/34.82/-116.65) &bull;
    [Hillsboro, KS](http://bl.ocks.org/NelsonMinar/raw/5624141/#13/38.3542/-97.2132) &bull;
    [Galveston Bay, TX](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/29.569/-94.857) &bull;
    [Cape Cod, MA](http://bl.ocks.org/NelsonMinar/raw/5624141/#11/41.8690/-70.3063).
    [Cape Cod, MA](http://bl.ocks.org/NelsonMinar/raw/5624141/#11/41.8690/-70.3063)

    Layers used here:

  3. NelsonMinar revised this gist May 22, 2013. 1 changed file with 10 additions and 10 deletions.
    20 changes: 10 additions & 10 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,16 +4,16 @@ A goofy slippy map of various vector tile data sources.
    With some fun colours, greetz to Aaron and Mike and Mike and the
    whole [Prettymaps](http://prettymaps.stamen.com/) crew.

    [Sacramento, CA](index.html#10/38.6008/-121.4621) &bull;
    [SF bay area, CA](index.html#10/37.9117/-122.1295) &bull;
    [New Orleans, LA](index.html#10/29.9823/-90.0961) &bull;
    [Boulder, CO](index.html#11/39.8692/-105.0217) &bull;
    [Albuquerque, NM](index.html#13/35.1485/-106.6932) &bull;
    [Crater Lake, OR](index.html#10/42.934/-122.121) &bull;
    [Bagdad Cafe, CA](index.html#10/34.82/-116.65) &bull;
    [Hillsboro, KS](index.html#13/38.3542/-97.2132) &bull;
    [Galveston Bay, TX](index.html#10/29.569/-94.857) &bull;
    [Cape Cod, MA](index.html#11/41.8690/-70.3063).
    [Sacramento, CA](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/38.6008/-121.4621) &bull;
    [SF bay area, CA](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/37.9117/-122.1295) &bull;
    [New Orleans, LA](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/29.9823/-90.0961) &bull;
    [Boulder, CO](http://bl.ocks.org/NelsonMinar/raw/5624141/#11/39.8692/-105.0217) &bull;
    [Albuquerque, NM](http://bl.ocks.org/NelsonMinar/raw/5624141/#13/35.1485/-106.6932) &bull;
    [Crater Lake, OR](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/42.934/-122.121) &bull;
    [Bagdad Cafe, CA](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/34.82/-116.65) &bull;
    [Hillsboro, KS](http://bl.ocks.org/NelsonMinar/raw/5624141/#13/38.3542/-97.2132) &bull;
    [Galveston Bay, TX](http://bl.ocks.org/NelsonMinar/raw/5624141/#10/29.569/-94.857) &bull;
    [Cape Cod, MA](http://bl.ocks.org/NelsonMinar/raw/5624141/#11/41.8690/-70.3063).

    Layers used here:

  4. NelsonMinar revised this gist May 22, 2013. 2 changed files with 1 addition and 160 deletions.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,7 +10,7 @@
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    <script src="leaflet-hash.js"></script>
    <script src="http://www.somebits.com/rivers/lib/leaflet-hash.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="TileLayer.d3_geoJSON.js"></script>

    159 changes: 0 additions & 159 deletions leaflet-hash.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,159 +0,0 @@
    (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.prototype = {
    map: null,
    lastHash: null,

    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;
    }
    },

    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("/");
    },

    init: function(map) {
    this.map = map;

    // reset the hash
    this.lastHash = null;
    this.onHashChange();

    if (!this.isListening) {
    this.startListening();
    }
    },

    remove: function() {
    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.remove();
    };
    })(window);
  5. NelsonMinar revised this gist May 22, 2013. 1 changed file with 14 additions and 2 deletions.
    16 changes: 14 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,20 @@
    ## Fun with vector maps

    A goofy slippy map of various vector tile data sources.
    With some "fun" colours, greetz to Aaron and Mike and Mike and the
    With some fun colours, greetz to Aaron and Mike and Mike and the
    whole [Prettymaps](http://prettymaps.stamen.com/) crew.

    [Sacramento, CA](index.html#10/38.6008/-121.4621) &bull;
    [SF bay area, CA](index.html#10/37.9117/-122.1295) &bull;
    [New Orleans, LA](index.html#10/29.9823/-90.0961) &bull;
    [Boulder, CO](index.html#11/39.8692/-105.0217) &bull;
    [Albuquerque, NM](index.html#13/35.1485/-106.6932) &bull;
    [Crater Lake, OR](index.html#10/42.934/-122.121) &bull;
    [Bagdad Cafe, CA](index.html#10/34.82/-116.65) &bull;
    [Hillsboro, KS](index.html#13/38.3542/-97.2132) &bull;
    [Galveston Bay, TX](index.html#10/29.569/-94.857) &bull;
    [Cape Cod, MA](index.html#11/41.8690/-70.3063).

    Layers used here:

    * [ESRI's shaded relief tiles](http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2)
    @@ -12,4 +24,4 @@ Layers used here:
    Want to make maps like this? See my
    [vector tiles tutorial](https://github.com/NelsonMinar/vector-river-map).

    Tested with Chrome.
    Tested with Chrome. If the background tiles are pepto-bismol pink instead of gunmetal grey, your browser doesn't support <tt>-webkit-filter</tt>.
  6. NelsonMinar revised this gist May 22, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,7 @@
    path.road { stroke: #b42; }
    path.water { stroke: #bcf; fill: #abf; }
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.4 }
    path.building { stroke: #f00; fill: #f00; }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>

    @@ -119,16 +120,15 @@
    // Highways from OpenStreetMap
    var roadSizes = {
    "highway": "5px",
    "major_road": "4px",
    "minor_road": "2px",
    "major_road": "3px",
    "minor_road": "1px",
    "rail": "0px",
    "path": "1px"
    "path": "0.5px"
    };
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json", {
    class: "road",
    style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind]; }
    }).addTo(map);


    </script>
    </body></html>
  7. NelsonMinar revised this gist May 22, 2013. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,4 +9,7 @@ Layers used here:
    * [My vector river tiles](https://github.com/NelsonMinar/vector-river-map)
    * [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/)

    Want to make maps like this? See my
    [vector tiles tutorial](https://github.com/NelsonMinar/vector-river-map).

    Tested with Chrome.
  8. NelsonMinar revised this gist May 22, 2013. 1 changed file with 22 additions and 17 deletions.
    39 changes: 22 additions & 17 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@
    path.river { stroke : #24b; }
    path.road { stroke: #b42; }
    path.water { stroke: #bcf; fill: #abf; }
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.5 }
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.4 }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>

    @@ -63,22 +63,21 @@
    new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

    // Land use areas from OpenStreetMap
    // Water Areas from OpenStreetMap
    var landColors = {
    "farm": "#4a4",
    "meadow": "#4a4",
    "scrub": "#4a4",
    "forest": "#4a4",
    "farmyard": "#4a4",
    "farmland": "#4a4",
    "wood": "#4a4",
    "park": "#4a4",
    "cemetery": "#4a4",
    "golf_course": "#4a4",
    "grass": "#4a4",
    "nature_reserve": "#4a4",
    "pitch": "#4a4",
    "common": "#4a4",
    "farm": 1,
    "meadow": 1,
    "scrub": 1,
    "forest": 1,
    "farmyard": 1,
    "farmland": 1,
    "wood": 1,
    "park": 1,
    "cemetery": 1,
    "golf_course": 1,
    "grass": 1,
    "nature_reserve": 1,
    "pitch": 1,
    "common": 1,
    "residential": "#ddd",
    "industrial": "#b3c",
    "commercial": "#b3c",
    @@ -90,11 +89,17 @@
    "college": "#b3c",
    "university": "#b3c",
    }
    function rando(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json", {
    class: "landuse",
    style: function(d) {
    var c = landColors[d.properties.kind];
    if (!c) { c = "#fff"; }
    if (c == 1) { // random greens
    c = "hsl(" + rando(100, 130) + ", " + rando(50,70) + "%, " + rando(30, 50) + "%)";
    }
    return "fill: " + c;
    }
    }).addTo(map);
    @@ -108,7 +113,7 @@
    // Water Areas from OpenStreetMap
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json", {
    class: "water",
    style: function(d) { return ""; }
    style: ""
    }).addTo(map);

    // Highways from OpenStreetMap
  9. NelsonMinar revised this gist May 22, 2013. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,8 @@
    ## Fun with vector maps

    A goofy slippy map of various vector tile data sources.
    With some "fun" colours, and apologies and respects to [Prettymaps](http://prettymaps.stamen.com/).
    With some "fun" colours, greetz to Aaron and Mike and Mike and the
    whole [Prettymaps](http://prettymaps.stamen.com/) crew.
    Layers used here:

    * [ESRI's shaded relief tiles](http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2)
  10. NelsonMinar revised this gist May 22, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@
    A goofy slippy map of various vector tile data sources.
    With some "fun" colours, and apologies and respects to [Prettymaps](http://prettymaps.stamen.com/).
    Layers used here:

    * [ESRI's shaded relief tiles](http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2)
    * [My vector river tiles](https://github.com/NelsonMinar/vector-river-map)
    * [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/)
  11. NelsonMinar revised this gist May 22, 2013. 1 changed file with 24 additions and 24 deletions.
    48 changes: 24 additions & 24 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@
    path { stroke-linejoin; round; stroke-linecap: round; fill: none}
    path.river { stroke : #24b; }
    path.road { stroke: #b42; }
    path.water { stroke: #91a; fill: #b3c; }
    path.water { stroke: #bcf; fill: #abf; }
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.5 }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>
    @@ -65,30 +65,30 @@
    // Land use areas from OpenStreetMap
    // Water Areas from OpenStreetMap
    var landColors = {
    "farm": "#4c4",
    "meadow": "#4c4",
    "scrub": "#4c4",
    "forest": "#4c4",
    "farmyard": "#4c4",
    "farmland": "#4c4",
    "wood": "#4c4",
    "park": "#4c4",
    "cemetery": "#4c4",
    "golf_course": "#4c4",
    "grass": "#4c4",
    "nature_reserve": "#4c4",
    "pitch": "#4c4",
    "common": "#4c4",
    "farm": "#4a4",
    "meadow": "#4a4",
    "scrub": "#4a4",
    "forest": "#4a4",
    "farmyard": "#4a4",
    "farmland": "#4a4",
    "wood": "#4a4",
    "park": "#4a4",
    "cemetery": "#4a4",
    "golf_course": "#4a4",
    "grass": "#4a4",
    "nature_reserve": "#4a4",
    "pitch": "#4a4",
    "common": "#4a4",
    "residential": "#ddd",
    "industrial": "#cc2",
    "commercial": "#cc2",
    "retail": "#cc2",
    "parking": "#cc2",
    "quarry": "#cc2",
    "school": "#cc2",
    "hospital": "#cc2",
    "college": "#cc2",
    "university": "#cc2",
    "industrial": "#b3c",
    "commercial": "#b3c",
    "retail": "#b3c",
    "parking": "#b3c",
    "quarry": "#b3c",
    "school": "#b3c",
    "hospital": "#b3c",
    "college": "#b3c",
    "university": "#b3c",
    }
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json", {
    class: "landuse",
  12. NelsonMinar revised this gist May 22, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,7 @@
    <script type="text/javascript">

    // Construct map, center if no location provided
    var map = L.map('map', { minZoom: 4, maxZoom: 15 } );
    var map = L.map('map', { minZoom: 10, maxZoom: 13 } );

    var hash = new L.Hash(map);
    if (!window.location.hash) {
    @@ -94,7 +94,7 @@
    class: "landuse",
    style: function(d) {
    var c = landColors[d.properties.kind];
    if (!c) { console.log("Unknown kind", d.properties.kind); c = "#fff"; }
    if (!c) { c = "#fff"; }
    return "fill: " + c;
    }
    }).addTo(map);
  13. NelsonMinar revised this gist May 22, 2013. 2 changed files with 10 additions and 0 deletions.
    10 changes: 10 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    ## Fun with vector maps

    A goofy slippy map of various vector tile data sources.
    With some "fun" colours, and apologies and respects to [Prettymaps](http://prettymaps.stamen.com/).
    Layers used here:
    * [ESRI's shaded relief tiles](http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2)
    * [My vector river tiles](https://github.com/NelsonMinar/vector-river-map)
    * [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/)

    Tested with Chrome.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  14. NelsonMinar revised this gist May 22, 2013. 1 changed file with 46 additions and 8 deletions.
    54 changes: 46 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,9 @@

    path { stroke-linejoin; round; stroke-linecap: round; fill: none}
    path.river { stroke : #24b; }
    path.road { stroke: #4b2; }
    path.road { stroke: #b42; }
    path.water { stroke: #91a; fill: #b3c; }
    path.landuse { stroke: #bb2; fill: #cc2; opacity: 0.5 }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>

    @@ -43,11 +44,11 @@
    <script type="text/javascript">

    // Construct map, center if no location provided
    var map = L.map('map', { minZoom: 4, maxZoom: 13 } );
    var map = L.map('map', { minZoom: 4, maxZoom: 15 } );

    var hash = new L.Hash(map);
    if (!window.location.hash) {
    map.setView([39.23, -121.065], 11);
    map.setView([39.28, -121.18], 10);
    }

    // Make the base map; a raster tile relief map from ESRI
    @@ -61,7 +62,44 @@
    // Add a fake GeoJSON line to coerce Leaflet into creating the <svg> tag that d3_geoJson needs
    new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

    // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
    // Land use areas from OpenStreetMap
    // Water Areas from OpenStreetMap
    var landColors = {
    "farm": "#4c4",
    "meadow": "#4c4",
    "scrub": "#4c4",
    "forest": "#4c4",
    "farmyard": "#4c4",
    "farmland": "#4c4",
    "wood": "#4c4",
    "park": "#4c4",
    "cemetery": "#4c4",
    "golf_course": "#4c4",
    "grass": "#4c4",
    "nature_reserve": "#4c4",
    "pitch": "#4c4",
    "common": "#4c4",
    "residential": "#ddd",
    "industrial": "#cc2",
    "commercial": "#cc2",
    "retail": "#cc2",
    "parking": "#cc2",
    "quarry": "#cc2",
    "school": "#cc2",
    "hospital": "#cc2",
    "college": "#cc2",
    "university": "#cc2",
    }
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-land-usages/{z}/{x}/{y}.json", {
    class: "landuse",
    style: function(d) {
    var c = landColors[d.properties.kind];
    if (!c) { console.log("Unknown kind", d.properties.kind); c = "#fff"; }
    return "fill: " + c;
    }
    }).addTo(map);

    // Rivers from Nelson's vector river tutorial
    new L.TileLayer.d3_geoJSON("http://somebits.com:8001/rivers/{z}/{x}/{y}.json", {
    class: "river",
    style: function(d) { return "stroke-width: " + d.properties.strahler * map.getZoom()/13 + "px"; }
    @@ -75,11 +113,11 @@

    // Highways from OpenStreetMap
    var roadSizes = {
    "highway": "3px",
    "major_road": "2px",
    "minor_road": "1px",
    "highway": "5px",
    "major_road": "4px",
    "minor_road": "2px",
    "rail": "0px",
    "path": "0.5px"
    "path": "1px"
    };
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json", {
    class: "road",
  15. NelsonMinar revised this gist May 22, 2013. 1 changed file with 10 additions and 1 deletion.
    11 changes: 10 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -31,6 +31,7 @@
    path { stroke-linejoin; round; stroke-linecap: round; fill: none}
    path.river { stroke : #24b; }
    path.road { stroke: #4b2; }
    path.water { stroke: #91a; fill: #b3c; }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>

    @@ -42,7 +43,7 @@
    <script type="text/javascript">

    // Construct map, center if no location provided
    var map = L.map('map', { minZoom: 10, maxZoom: 13 } );
    var map = L.map('map', { minZoom: 4, maxZoom: 13 } );

    var hash = new L.Hash(map);
    if (!window.location.hash) {
    @@ -66,6 +67,12 @@
    style: function(d) { return "stroke-width: " + d.properties.strahler * map.getZoom()/13 + "px"; }
    }).addTo(map);

    // Water Areas from OpenStreetMap
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.json", {
    class: "water",
    style: function(d) { return ""; }
    }).addTo(map);

    // Highways from OpenStreetMap
    var roadSizes = {
    "highway": "3px",
    @@ -78,5 +85,7 @@
    class: "road",
    style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind]; }
    }).addTo(map);


    </script>
    </body></html>
  16. NelsonMinar revised this gist May 22, 2013. 1 changed file with 21 additions and 13 deletions.
    34 changes: 21 additions & 13 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,11 +28,10 @@
    border-radius: 5px;
    }

    path { stroke-linejoin; round; stroke-linecap: round; }
    .river {
    fill : none;
    stroke : #29439c;
    }
    path { stroke-linejoin; round; stroke-linecap: round; fill: none}
    path.river { stroke : #24b; }
    path.road { stroke: #4b2; }
    img { -webkit-filter: grayscale(100%) brightness(40%) contrast(150%);}
    </style>

    </head><body>
    @@ -43,18 +42,17 @@
    <script type="text/javascript">

    // Construct map, center if no location provided
    var map = L.map('map', { maxZoom: 13 } );
    var map = L.map('map', { minZoom: 10, maxZoom: 13 } );

    var hash = new L.Hash(map);
    if (!window.location.hash) {
    map.setView([37.958, -120.976], 8);
    map.setView([39.23, -121.065], 11);
    }

    // Make the base map; a raster tile relief map from ESRI
    var esriRelief = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'

    var basemap = L.tileLayer(esriRelief, {
    attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>',
    attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>, OpenStreetMap',
    maxZoom: 13
    });
    basemap.addTo(map);
    @@ -63,12 +61,22 @@
    new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

    // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
    function riverStyle(d) {
    return "stroke-width: " + d.properties.strahler/2 + "px";
    }
    new L.TileLayer.d3_geoJSON("http://somebits.com:8001/rivers/{z}/{x}/{y}.json", {
    class: "river",
    style: riverStyle
    style: function(d) { return "stroke-width: " + d.properties.strahler * map.getZoom()/13 + "px"; }
    }).addTo(map);

    // Highways from OpenStreetMap
    var roadSizes = {
    "highway": "3px",
    "major_road": "2px",
    "minor_road": "1px",
    "rail": "0px",
    "path": "0.5px"
    };
    new L.TileLayer.d3_geoJSON("http://tile.openstreetmap.us/vectiles-highroad/{z}/{x}/{y}.json", {
    class: "road",
    style: function(d) { return "stroke-width: " + roadSizes[d.properties.kind]; }
    }).addTo(map);
    </script>
    </body></html>
  17. NelsonMinar revised this gist May 22, 2013. 2 changed files with 53 additions and 48 deletions.
    66 changes: 39 additions & 27 deletions TileLayer.d3_geoJSON.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,43 @@
    /* Experimental vector tile layer for Leaflet
    * Uses D3 to render GeoJSON; faster than Leaflet's native.
    * Originally by Ziggy Jonsson: http://bl.ocks.org/ZJONSSON/5602552
    * Reworked by Nelson Minar: http://bl.ocks.org/NelsonMinar/5624141
    *
    * Todo:
    * Make this work even if <svg> isn't in the DOM yet
    * Make this work for tile types that aren't FeatureCollection
    * Match D3 idioms for .classed(), .style(), etc
    * Work on allowing feature popups, etc.
    */
    L.TileLayer.d3_geoJSON = L.TileLayer.extend({
    onAdd : function(map) {
    L.TileLayer.prototype.onAdd.call(this,map);
    this.g = d3.select(map._container).select("svg").append("g");
    this._path = d3.geo.path().projection(function(d) {
    var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
    return [point.x,point.y];
    });
    this.on("tileunload",function(d) {
    if (d.tile.xhr) d.tile.xhr.abort();
    if (d.tile.nodes) d.tile.nodes.remove();
    d.tile.nodes = null;
    d.tile.xhr = null;
    });
    },
    _loadTile : function(tile,tilePoint) {
    var self = this;
    this._adjustTilePoint(tilePoint);
    onAdd : function(map) {
    L.TileLayer.prototype.onAdd.call(this,map);
    this._path = d3.geo.path().projection(function(d) {
    var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
    return [point.x,point.y];
    });
    this.on("tileunload",function(d) {
    if (d.tile.xhr) d.tile.xhr.abort();
    if (d.tile.nodes) d.tile.nodes.remove();
    d.tile.nodes = null;
    d.tile.xhr = null;
    });
    },
    _loadTile : function(tile,tilePoint) {
    var self = this;
    this._adjustTilePoint(tilePoint);

    if (!tile.nodes && !tile.xhr) {
    tile.nodes = d3.select();
    tile.xhr = d3.json(this.getTileUrl(tilePoint),function(d) {
    tile.xhr = null;
    tile.nodes = self.g.append("path")
    .datum(d)
    .attr("d",self._path)
    .attr("class",self.options.class);
    });
    if (!tile.nodes && !tile.xhr) {
    tile.xhr = d3.json(this.getTileUrl(tilePoint),function(geoJson) {
    tile.xhr = null;
    tile.nodes = d3.select(map._container).select("svg").append("g");
    tile.nodes.selectAll("path")
    .data(geoJson.features).enter()
    .append("path")
    .attr("d", self._path)
    .attr("class", self.options.class)
    .attr("style", self.options.style);
    });
    }
    }
    }
    });
    35 changes: 14 additions & 21 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,11 +10,9 @@
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/leaflet-hash.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/TileLayer.GeoJSON.js"></script>
    <script src="leaflet-hash.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://bl.ocks.org/ZJONSSON/raw/5529395/TileLayer.d3_geoJSON.js"></script>
    <script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/us-states.js"></script>
    <script src="TileLayer.d3_geoJSON.js"></script>

    <style type="text/css">
    html, body { height: 100% }
    @@ -30,19 +28,17 @@
    border-radius: 5px;
    }

    path { stroke-linejoin; round; stroke-linecap: round; }
    .river {
    fill : none;
    stroke : blue;
    stroke : #29439c;
    }
    </style>

    </head><body>

    <div id="map"></div>
    <a href="https://github.com/NelsonMinar/vector-river-map"><img
    style="position:absolute;top:0;right:0;border:0;"
    width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/forkme.png" alt="Fork me on GitHub"
    /></a>


    <script type="text/javascript">

    @@ -63,19 +59,16 @@
    });
    basemap.addTo(map);

    // Add a single GeoJSON vector file for state boundaries
    // This was loaded statically as a script; could also be AJAX
    var stateLayer = new L.geoJson(usStates);
    stateLayer.setStyle({ "color": "#444",
    "weight": 1,
    "fill": false,
    "opacity": 1.0 });
    stateLayer.addTo(map);
    // Add a fake GeoJSON line to coerce Leaflet into creating the <svg> tag that d3_geoJson needs
    new L.geoJson({"type": "LineString","coordinates":[[0,0],[0,0]]}).addTo(map);

    // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
    var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";

    new L.TileLayer.d3_geoJSON(geojsonURL,{class:"river"})
    .addTo(map);
    function riverStyle(d) {
    return "stroke-width: " + d.properties.strahler/2 + "px";
    }
    new L.TileLayer.d3_geoJSON("http://somebits.com:8001/rivers/{z}/{x}/{y}.json", {
    class: "river",
    style: riverStyle
    }).addTo(map);
    </script>
    </body></html>
  18. NelsonMinar revised this gist May 22, 2013. 2 changed files with 190 additions and 0 deletions.
    31 changes: 31 additions & 0 deletions TileLayer.d3_geoJSON.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    L.TileLayer.d3_geoJSON = L.TileLayer.extend({
    onAdd : function(map) {
    L.TileLayer.prototype.onAdd.call(this,map);
    this.g = d3.select(map._container).select("svg").append("g");
    this._path = d3.geo.path().projection(function(d) {
    var point = map.latLngToLayerPoint(new L.LatLng(d[1],d[0]));
    return [point.x,point.y];
    });
    this.on("tileunload",function(d) {
    if (d.tile.xhr) d.tile.xhr.abort();
    if (d.tile.nodes) d.tile.nodes.remove();
    d.tile.nodes = null;
    d.tile.xhr = null;
    });
    },
    _loadTile : function(tile,tilePoint) {
    var self = this;
    this._adjustTilePoint(tilePoint);

    if (!tile.nodes && !tile.xhr) {
    tile.nodes = d3.select();
    tile.xhr = d3.json(this.getTileUrl(tilePoint),function(d) {
    tile.xhr = null;
    tile.nodes = self.g.append("path")
    .datum(d)
    .attr("d",self._path)
    .attr("class",self.options.class);
    });
    }
    }
    });
    159 changes: 159 additions & 0 deletions leaflet-hash.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,159 @@
    (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.prototype = {
    map: null,
    lastHash: null,

    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;
    }
    },

    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("/");
    },

    init: function(map) {
    this.map = map;

    // reset the hash
    this.lastHash = null;
    this.onHashChange();

    if (!this.isListening) {
    this.startListening();
    }
    },

    remove: function() {
    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.remove();
    };
    })(window);
  19. @ZJONSSON ZJONSSON revised this gist May 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -73,7 +73,7 @@
    stateLayer.addTo(map);

    // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
    var geojsonURL = "http://somebits.com:8000/rivers/{z}/{x}/{y}.json";
    var geojsonURL = "http://somebits.com:8001/rivers/{z}/{x}/{y}.json";

    new L.TileLayer.d3_geoJSON(geojsonURL,{class:"river"})
    .addTo(map);
  20. @ZJONSSON ZJONSSON revised this gist May 18, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,11 +10,11 @@
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/lib/leaflet-hash.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/lib/TileLayer.GeoJSON.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/leaflet-hash.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/lib/TileLayer.GeoJSON.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://bl.ocks.org/ZJONSSON/raw/5529395/TileLayer.d3_geoJSON.js"></script>
    <script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/us-states.js"></script>
    <script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/us-states.js"></script>

    <style type="text/css">
    html, body { height: 100% }
    @@ -41,7 +41,7 @@
    <div id="map"></div>
    <a href="https://github.com/NelsonMinar/vector-river-map"><img
    style="position:absolute;top:0;right:0;border:0;"
    width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/forkme.png" alt="Fork me on GitHub"
    width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/clients/forkme.png" alt="Fork me on GitHub"
    /></a>

    <script type="text/javascript">
  21. @ZJONSSON ZJONSSON revised this gist May 17, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,7 @@
    <div id="map"></div>
    <a href="https://github.com/NelsonMinar/vector-river-map"><img
    style="position:absolute;top:0;right:0;border:0;"
    width="149" height="149" src="forkme.png" alt="Fork me on GitHub"
    width="149" height="149" src="https://raw.github.com/NelsonMinar/vector-river-map/master/forkme.png" alt="Fork me on GitHub"
    /></a>

    <script type="text/javascript">
  22. @ZJONSSON ZJONSSON created this gist May 17, 2013.
    81 changes: 81 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,81 @@
    <!DOCTYPE html>
    <html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0"/>

    <title>Leaflet vector tile map of rivers</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/lib/leaflet-hash.js"></script>
    <script src="https://raw.github.com/NelsonMinar/vector-river-map/master/lib/TileLayer.GeoJSON.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://bl.ocks.org/ZJONSSON/raw/5529395/TileLayer.d3_geoJSON.js"></script>
    <script type="text/javascript" src="https://raw.github.com/NelsonMinar/vector-river-map/master/us-states.js"></script>

    <style type="text/css">
    html, body { height: 100% }
    #map { min-height: 100%; }
    body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif; font-size: 12px;
    overflow: hidden;
    background-color: #f00;
    }
    .leaflet-popup-content-wrapper {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    .river {
    fill : none;
    stroke : blue;
    }
    </style>

    </head><body>

    <div id="map"></div>
    <a href="https://github.com/NelsonMinar/vector-river-map"><img
    style="position:absolute;top:0;right:0;border:0;"
    width="149" height="149" src="forkme.png" alt="Fork me on GitHub"
    /></a>

    <script type="text/javascript">

    // Construct map, center if no location provided
    var map = L.map('map', { maxZoom: 13 } );

    var hash = new L.Hash(map);
    if (!window.location.hash) {
    map.setView([37.958, -120.976], 8);
    }

    // Make the base map; a raster tile relief map from ESRI
    var esriRelief = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}'

    var basemap = L.tileLayer(esriRelief, {
    attribution: '<a href="http://www.arcgis.com/home/item.html?id=9c5370d0b54f4de1b48a3792d7377ff2">ESRI shaded relief</a>, <a href="http://www.horizon-systems.com/NHDPlus/NHDPlusV2_home.php">NHDPlus v2</a>',
    maxZoom: 13
    });
    basemap.addTo(map);

    // Add a single GeoJSON vector file for state boundaries
    // This was loaded statically as a script; could also be AJAX
    var stateLayer = new L.geoJson(usStates);
    stateLayer.setStyle({ "color": "#444",
    "weight": 1,
    "fill": false,
    "opacity": 1.0 });
    stateLayer.addTo(map);

    // Make the river overlay layer, vector tiles from our TileStache/Gunicorn server
    var geojsonURL = "http://somebits.com:8000/rivers/{z}/{x}/{y}.json";

    new L.TileLayer.d3_geoJSON(geojsonURL,{class:"river"})
    .addTo(map);
    </script>
    </body></html>