Pedro's Tech Mumblings: Zoomable image with Leaflet. Last week the European Southern Observatory (ESO) published a 9 giga-pixel image cataloging 84 million stars in the Central parts of the Milky Way.
They even provided this image in a zoomable format at . It's really cool, but I'm not particularly fond of the Flash Plugin that they've used. It's a little bit slugish, and IMHO something like Google/Bing/Leaflet could provide a much better user experience. That said, here's what I'll do: I'll get a smaller image from ESO, split it in tile images and display it on Leaflet. Ultimate AngularJS and Ionic performance cheat sheet. As a lot of persons have asked me about how to improve AngularJS and/or Ionic performance.
To avoid repeating myself on forums or on Slack I decided to create this ultimate cheat sheet list! AngularJS $watch. Fedik/php-maptiler. Ultimate AngularJS and Ionic performance cheat sheet. Using Leaflet.js with non-geographic imagery - Oliver Marriott. Hey!
Leaflet Quick Start Guide A simple step-by-step guide that will quickly get you started with Leaflet basics, including setting up a Leaflet map (with Mapbox tiles) on your page, working with markers, polylines and popups, and dealing with events. Leaflet on Mobile In this tutorial, you’ll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location. Markers with Custom Icons In this pretty tutorial, you’ll learn how to easily define your own icons for use by the markers you put on the map. Using GeoJSON with Leaflet In this tutorial, you’ll learn how to create and interact with map vectors created from GeoJSON objects.
Interactive Choropleth Map A case study of creating a colorful interactive choropleth map of US States Population Density with GeoJSON and some custom controls. Calendee/ionic-leafletjs-map-demo. Using leaflet.js to pan and zoom a big image. I recently used leaflet.js to embed a large image in a webpage and allow users pan over it and zoom into it.
There's a Stack Overflow post about how to do this for a single image, but the anwsers don't have enough detail to make it easy to understand and do. The image I used was of a newspaper article. It's not big enough to need segmentation, but it's too big to show on a page at full scale. I need to be able to read the article text. By using Leaflet I can zoom out to get an overview of the layout, and zoom in and pan to read the text. The result Here's the end product. and here's the code to make it work. How it works Let's walk through the code. minZoom: 1, maxZoom: 4, center: [0, 0], zoom: 1, We want to be able to zoom over 4 levels (1 to 4). This tells Leaflet to use a simple 1-1 mapping between screen pixels and its internal latitude-longitude coordinate system. Image sizes and coordinates // dimensions of the imagevar w = 2000, h = 1500, url = '/images/newspaper-big.jpg'; Conclusion.
Use ngStorage For All Your AngularJS Local Storage Needs. I’ve been doing a lot of work with AngularJS lately, and in particular Ionic Framework.
However, up until recently I have been using either HTML5 local storage or SQLite. Now I’ve switched gears and started using the AngularJS module ngStorage which has made my life a lot easier. Previously when using HTML5 local storage, I continuously had to serialize and unserialize my objects before using or saving them.