Develop Reference

How to make a grid of fixed size even when zooming?

i would like to create a map that only contains a plane of tiles that are being populated with infos.
I would like to create a grid, and for that i started by using
var map = L.map('map', {
zoomControl: false,}).setView([0, 0], 3);
L.GridLayer.GridMap = L.GridLayer.extend({
createTile: function (coords) {
var tile = document.createElement('div');
tile.style.outline = '2px solid black';
tile.style.borderRadius = '5px';
return tile;
}
});
L.gridLayer.gridMap = function(opts) {
return new L.GridLayer.GrdMap(opts);
};
map.addLayer( L.gridLayer.gridMap() );
However, these tiles changes size when zooming out, while i would like them to shrink when zooming out.
Can anyone help me ?
Thanks

As IvanSanchez said, i just have to use minNativeZoom and maxNativeZoom. Thanks a lot !

OpenLayers Javascript, Large Resolution Map disappears until zoomed in

I'm loading a map in Openlayers (JavaScript) that has a high resolution. (9149 by 7700)
When I load the page it appears blank (all controls/map/everything is missing) until I zoom in. I'm curious what would be causing this and how I might be able to resolve this.
I've pasted some of my code below that should hopefully shed some light on the issue (or what I'm missing).
function initMap() {
OpenLayers.ImgPath = "Openlayers/img/";
map = new OpenLayers.Map('map', options);
var osm = new OpenLayers.Layer.OSM();
var graphic = new OpenLayers.Layer.Image('Foo', 'images/LargeMap.jpg',
new OpenLayers.Bounds(2616634.1736111115, 179682.0532407412, 2625783.173611111,187382.0532407412),
new OpenLayers.Size(9149,7700), { isBaseLayer: true });
and
var options = {
zoom: 5,
theme: null,
projection: PASouthPlane,
displayProjection: PASouthPlane,
units: "ft",
resolutions: [19.1088,9.5544,4.7772,2.3886, 1.19432, 0.5971, 0.29855, 0.149275],
scales:[54168,27084,13542,6771,3385.5, 1692.75, 846.375, 423.1875],
//resolutions: [4.7772,2.3886, 1.19432, 0.5971, 0.29855, 0.149275],
//scales:[13542,6771,3385.5, 1692.75, 846.375, 423.1875],
//maxExtent: new OpenLayers.Bounds(-8.39794e+006, 4.83761e+006, -8.394873e+006, 4.840365e+006) //-8.39802e+006, 4.83753e+006, -8.39479e+006, 4.84045e+006
maxExtent: new OpenLayers.Bounds(2616634.1736111115, 179682.0532407412, 2625783.173611111,187382.0532407412)
};
--
Proj4js.defs["EPSG:2272"] = "+proj=lcc +lat_1=40.96666666666667 +lat_2=39.93333333333333 +lat_0=39.33333333333334 +lon_0=-77.75 +x_0=600000 +y_0=0 +ellps=GRS80 +datum=NAD83 +to_meter=0.3048006096012192 +no_defs";
var PASouthPlane = new OpenLayers.Projection("EPSG:2272");

How to fit map to tile layer bounds in leaflet

I have a leaflet map. The map container is very big compared to the tile in first zoom level (256px X 256px). I want to get the bounds of tile and fit the map bounds to it. I am able to fitbound() with multiple markers. I adopted the code from here . I tried to achieve fit to tile also with same idea. unfortunately it doesn't seem working. Here is my code
var fitToBounds = function () {
//getting bound of tile 256X256 pixel
var maxLat = map.unproject(new L.Point(0,0)).lat;
var maxLat = map.unproject(new L.Point(0,256)).lat;
var maxLng = map.unproject(new L.Point(256,0)).lng;
var minLng = map.unproject(new L.Point(256,256)).lng;
var southWest = new L.LatLng(minLat, minLng);
var northEast = new L.LatLng(maxLat, maxLng);
map.fitBounds(new L.LatLngBounds(southWest, northEast));
};

Group your markers in a L.mapbox.featureGroup() and then on your map use
map.fitBounds(featureGroup.getBounds());
Feature groups are like a layerGroup but also has a .getBounds() method that can be used to set your fit. See the docs.

maybe not the best solution, but at least working:
Add an other layer and make it invisible. Zoom to this one. Advantage is, you might also add onEachFeature.
var pointsWithBounds=[]
_.each(layerWithoutBounds, function (element) {
pointsWithBounds.push(
{
"type": "Feature",
"geometry": {
"type": "CircleMarker",
"coordinates": [element.lon, element.lat]
});
});
var layerWithBounds = L.geoJSON(pointsWithBounds, {
style: {
fillColor: 'transparent',
color: 'transparent'
}
});
layerWithBounds.addTo(map)
map.setView(layerWithBounds.getBounds().getCenter());
map.fitBounds(layerWithBounds.getBounds());

Kinetic.js Can't Load image onto canvas

I have to be missing something simple. I have gone fairly line-by-line, but it just doesn't seem to work. I can't get the image to load.
var imageToCanvas = function(){
var stage = new Kinetic.Stage("imgarea", 250, 256);
var layer = new Kinetic.Layer();
var imageobj = new Image();
imageobj.onload = function(){
var img = new Kinetic.Image({
x: 10,
y: 10,
image: imageobj,
});
layer.add(img);
stage.add(layer);
};
imageobj.src = "/static/img/unit-test-image.png";
console.log(imageobj);
};
$(document).ready( function(){
imageToCanvas();
});
<canvas id="imgarea" width="250px" height="256px"></canvas>
the same code seems to work in another canvas app that I used Kinetc.js with. I just can't seem to figure out why this one isn't working.
The code also looks fairly similar to the tutorial as well: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-image-tutorial/

It looks like you're not defining the stage properly.. When I tried your code above I got an error about the container not being defined.. Try this instead..
var stage = new Kinetic.Stage({
container: "imgarea",
width: 250,
height: 256
});

Preload a Google Maps overlay

I'm trying to use a Google Map as a background, with a fixed overlay. Have a look-see.
You can see the problem — whilst it's loading, the text is unreadable. The overlay is loaded by Google's JS. How can I hide the map until the overlay has loaded? (Or a better solution?)

Actually, you can use JavaScript to make sure the map only displays when the overlay is loaded:
document.observe('dom:loaded', function()
{
if (GBrowserIsCompatible()) {
var overlaySrc = 'img/contact_map_overlay.png';
var preloadOverlay = new Image();
preloadOverlay.onload = function() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-33.82568, 151.2180955505371), 14, G_PHYSICAL_MAP);
var mapTypeControl = new GMapTypeControl();
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(80, 250));
map.addControl(new GSmallMapControl(), topRight);
var mapTarget = new GScreenOverlay(overlaySrc, new GScreenPoint(0.0, 0.0, 'fraction', 'fraction'), // screenXY
new GScreenPoint(0, 0), // overlayXY
new GScreenSize(1, 1, 'fraction', 'fraction') // size on screen
);
map.addOverlay(mapTarget);
var pin = new GIcon(G_DEFAULT_ICON);
pin.image = "img/pin.png";
pin.shadow = "no-shadow";
pin.iconSize = new GSize(34, 43);
markerOptions = {
icon: pin
};
var marker = new GMarker(new GLatLng(-33.82568, 151.240635), markerOptions);
map.addOverlay(marker);
}
preloadOverlay.src = overlaySrc;
}
});
Google simply displays the image from the server, so having it loaded into the cache before displaying the map will solve your problem.

I don't see any way in the v2 Api to either know when the overlay has loaded, or hide the map until it finishes the overlay.
The load() event fires before the overlays have finished loading. I notice the overlay is quite large at 684KB. A smaller overlay loads quicker.
You might also consider just putting a background image or something behind the contact us text which is being obscured (granted for only 5 seconds).