We Keep Coding

Preload Leaflet nearby tiles

I am using Leaflet as my map component. When the map initially loads, I want to preload nearby tiles at the same zoom level. What is the best solution to do this?

Please note that the keepBuffer option of L.GridLayer (and L.TileLayer) affects how tiles are unloaded: A bigger value of keepBuffer means that the user has to pan around further away before tiles are unloaded. It does not affect how soon tiles are loaded.
If you want to preload nearby tiles, I encourage you to look at some of the plugins, and in particular Leaflet.EdgeBuffer.

Use Leaflet Grid/Tile Layer option keepBuffer:
When panning the map, keep this many rows and columns of tiles before unloading them.

EaselJS - scale Container without scaling certain children of container

I am creating a project in CreateJS (specifically, EaselJS) where I have a draggable map. There are several wrinkles to this that I'm trying to figure out my way around.
Basically, when the user drags the map to certain points, the map is supposed to automatically zoom in or out (i.e. the scaleX and scaleY of the map container change), in order to focus on areas of interest.
This would be fairly simple and I in fact already have a prototype that does this— there's just one problem.
The map has a layer of map markers (pins on the map) floating above it. When the map zooms in, these map markers need to stay stuck to their underlying places on the map.
Making markers children of the map's Container is the logical step, but there's a further problem with that: The markers are in the correct places, but when the map zooms in, the markers get larger. When it zooms out, the markers get smaller.
Is there an efficient way I can prevent these markers' containers from being scaled themselves, only moved in step with the parent Container's scaling?

Instead of putting everything in the same Container, use multiple Containers, and use localToGlobal to position labels. It will be more work, but its really the only way.
You could counter-scale the labels, but Container's main purpose is to translate and transform a group of display objects together.

How do I resize SVG images on a map as the zoom level changes?

I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.
I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.
Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?
EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)
http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html

Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.
Google maps has an event in it's api which is triggered when the zoom level changes.
https://developers.google.com/maps/documentation/javascript/events#EventProperties

Adding a Mask Overlay on top of Leaflet v0.8-dev

I'm trying to create a circular masked overlay using Leaflet 0.8 that is positioned over the users currently location, extending a radius of 1000 meters. Essentially making the map visible around the user (as a circle), and grayed out beyond 1000 meters
Mockup:
As the user zooms in/out on the map, the circle should resize accordingly.
I tried using leaflet-maskcanvas, a plugin for Leaflet that looks like it would do exactly what I need, unfortunately with all refactoring done in Leaflet 0.8-dev, this plugin isn't compatible.
Has anyone been able to achieve this effect successfully with Leaflet 0.8?

I'm thinking of one hacky way of doing this is using Turf.js to take the map's current center point(map.getCenter()), buffer it 1000 meters with Turf, take that result, and then grab the map viewport's current bounds(map.getBounds()), and use turf erase on it. Then draw the resulting polygon on the map(which is the difference), and then update this on any move events.
http://turfjs.org/static/docs/module-turf_buffer.html
http://turfjs.org/static/docs/module-turf_intersect.html
http://turfjs.org/static/docs/module-turf_erase.html

How can I implement a zoomable draggable interface the same as seatgeek?

Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH

Map Client
OpenLayers
OpenLayers Examples
Map Data
OpenStreetMap

This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
Take the full image and create tiles in different scales and consequently with different depth.
The user start looking at the scene in real scale, composed by 16 tiles created from the original scene.
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
If the user zoom more than X, you change the 16 tiles by their 16 child tiles! Got it? Higher the zoom, higher the detail. To avoid having 36000 tiles at the same time, generate with different depth and switch them on the fly.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.

CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with alex#cloudmade.com for more information.