Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Results for tag: leaflet

Clip Map Images on Text Background

images on text with css background

I was looking at my clipping map tiles example where I clipped some imagery behind a word created with GeoJSON paths and wondered if I could just use a normal font which would clip a photo using css background URL attribute. It would be cool to see how map tiles can be rendered as CANVAS tiles, combined into a single canvas, converted into an image, and then applied in a CSS background attribute to clip imagery behind text. Instead of converting text to GeoJSON paths, I want to make an online tool that does all the magic for me with regular text, CSS, and CANVAS.
Read more

Zoom into US Zip Codes in Leaflet Map

zipdecode on leaflet

It has been a while since I touched Leaflet and today I want to play around with mapping zip codes. I really liked Ben Fry’s zipdecode project and have seen other interesting implementations. But, I want to go beyond highlighting and actually zoom into the appropriate areas based on each number of the zip code. I think this would be an interesting take on zip decoding and I am going to implement it on a Leaflet map.
Read more

Leaflet and Zoom into Country via GeoJSON

Leafletjs zoom geoJSON

I was really impressed with Leaflet and UTFgrid but I wondered how hard would it be to allow the end user to highlight countries on mouse hover and zoom into a specific country on mouse click. I did that in my D3 World Map Example by leveraging GeoJSON but Leaflet.js creates a world map using image tiles. Of course, you could load the GeoJSON code as a layer in Leaflet and then use that data to identify countries on mouse over and zoom into the bounds of that country area on click. It’s actually really simple and here is how to do it.
Read more

Leaflet Map with UTFGrid and PHP Served Mbtiles

Leaflet Maps, UTFGrid, MapBox, TileMill, and Mbtiles

Final Demo: Largest Cities on Leaflet Map

It has been fun visualizing all kinds of data with D3, Raphael, OpenLayers, MapBox, PolyMaps, and ModestMaps, but now I really want to dig into Leaflet and UTFGrid. UTFGrid is a concept created by MapBox to improve the performance of map interaction across browsers when you are dealing with large amounts of vector data. In more detail, UTFGrid rasterizes polygons and points in JSON as a grid of text characters to enable fast lookups. It is as amazing and simple as it sounds and Leaflet has a UTFGrid plugin among its many great plugins.

Today I will show a basic example of Leaflet, demonstrate how to use MapBox maps in Leaflet, create a map out of city data in TileMill with UTFGrid, serve those map image tiles with PHP from my own server, and put it all together to create a demo of a fast dynamic Leaflet map with top 1,000 cities by population.
Read more