background preloader

jQuery Geo docs

jQuery Geo docs
Welcome! jQuery Geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term "open-source" to explictly state that Google, Bing, & Esri are generally free but not open. Please read the following sections for more information and examples, and thank you for considering us! If you have any questions feel free to ask the lead developer on Twitter. If you would like only release notifications, you can follow the project itself on Twitter. docs This project takes pride in having easy-to-use, up-to-date documentation. examples Now that that's out of the way, here are some code examples! "everything" examples These first two examples attempt to let you test as many of jQuery Geo's features as possible on one page. demos The examples in this second set of use the features of jQuery Geo in a more interesting way. showcase component examples Related:  Mapping

Welcome Real Ajax Uploader Modern HTML5 base multi file uploader. Fast, parallel uploads, chunk upload and more. Read More Cube Slider 3D Cubes Image Slider base on css3. Fine Zoom List of geocoding systems Geocoding is the process of finding associated geographic coordinates (often expressed as latitude and longitude) from other geographic data, such as street addresses, or ZIP codes (postal codes). Two lists are included here; one for the coding schemes, and one for systems that can encode and decode to and from a particular scheme. Encoding and decoding services[edit] These systems encode and decode data to and from a particular scheme (schemes listed below). Web services[edit] Downloadable[edit] Using the OpenStreetMap database: Nominatim, which powers and other sites and has a PostGIS-based backendPhoton, based on Apache Solr; powers komoot.deGisgraphy which also uses the GeoNames database and has a PostGIS-based backendPostGIS TIGER geocoder which uses the U.S. Coding schemes[edit] Some of these code systems are free for use, others have different licences. Administrative Airport Codes Geodesey Sport IOC country codes, area, worldwideISO 3166 country and subdivision codes

bjornharrtell/jsts - GitHub Mapbox: the jQuery Map Most Recent Blog Post:jQuery Mapbox Updated Click to toggle dark text on white Home » Plugins » Mapbox Get latest code here. Or get the outdated (but still working) version:[ Click here for the mapbox.min.js code - Click here for the uncompressed code ] $().mapbox(). The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. Mousewheel will zoom the map. * New feature: by default, the map will now zoom to the cursor position when the mousewheel is used. The code:Before using Mapbox, you must link to jQuery and mapbox.js. Then, some CSS. Then, some HTML. The jQuery: That is all! In addition to the settings, there are some methods that may be passed to any map once it has been created: Here's an example using some of these methods to implement a control panel for the map: Bandwidth costs money. The JavaScript error on this page is due to the Chili (code highligher) plugin.

MapQuest Geocoding Plugin for Leaflet v1.0 - MapQuest Developer Network The Geocoding plugin makes it easy to create a geocode request using the MapQuest Geocoding Web Service. Getting Started To begin using the MapQuest Geocoding Plugin for Leaflet, add the following to the head section of your page. Replace YOUR_KEY_HERE with your AppKey. Additionally, you will also need to load Leaflet as described in the Getting Started section of the Map Tiles plugin page. Geocoding with Single-Line Addresses The Geocoding plugin supports addresses formatted as single-line addresses and as an advanced Location object. ©2014 MapQuest - Some data ©2014 TomTom | Terms Geocoding with an Advanced Location Object Below is an example of passing in a location as an advanced Location object as described in the Specifying Locations documentation. Geocoding and Custom Icons Setting custom icons for your POI markers can be easily achieved by defining a new L.Icon for the icon property. Geocoding and Handling POI Markers with Popups San Francisco, CAis located here. Reverse Geocoding

MapTiler - Map Tile Cutter. Overlay Generator for Google Maps, Google Earth (KML SuperOverlay). A jQuery Plugin for Zoomable, Interactive Maps What is it and why was it built? A couple of months ago we launched a site about Marine Science in North Carolina with one of our design partners, Liaison Design Group. A key part of the project was an interactive map that allowed visitors to find important Marine Science resources in North Carolina. Each location on the map would be represented by a bullet. We wanted the experience to be engaging as possible but also easily updatable in the future. Demos This project is being used in production on a number of sites. Documentation Limitations This was originally developed for one project with very specific requirements. Data Required In Plugin Setup - Ideally all of the required data would be stored in the html pages that drive the bullets. Even with these limitations, this is ready for production and is being used on several sites as seen above in the demos. Instructions 1. There are very limited requirements on the background images: They must all be the same size. 2. 3. Questions/Comments?

Geocoding Web Service - MapQuest Platform The geocoding service enables you to take an address and get the associated latitude and longitude. You can also use any latitude and longitude pair and get the associated address. Three types of geocoding are offered: address, reverse, and batch. The following example demonstrates a simple request to get geocode information for Lancaster, PA. (Results will be displayed below) The following table describes the request parameters that are not related to specific Geocode Request options. Depending on the geocode function being called, one or more locations are needed. Specifying Country The geocoding target country can be specified by using the "adminArea1" or "country" request parameter (Refer to the Locations documentation). Country biasing is additionally provided. Single-line vs. 5-box Input The following are sample requests for 1090 N Charlotte St, Lancaster, PA, 17603 shown in single-line and 5-box request formats: Geocode Options Sample

Interactive maps with OpenLayers examples Embed a map in your website - Using wizard Use the OpenLayers Wizard to generate your own customized snippet. Copy/paste the generated snippet to your page source (it should look like sample below). <html><head> […] <!-- Road-Maps API //--><script src='//'></script><! Embed a map in your website - Manually Required files Include the OpenLayers API in the <HEAD> section of your document: <head> […] <! Required elements Define the container into which the map will appear in the <BODY> section of your document: <! Layers / Placemarks / Data Include placemarks and data using kml files through a JSON object ollayers requiring 3 parameters: identifier / name: key identifying the layer in the JSON object label: Label of the kml file. Important: If you use kml file, make sure it respects the correct structure OPTIONAL: You could define several layers. List of styles for placemarks: Parameters

10 jQuery Google Map Plugins Here are 10 very different jQuery Google Maps Plugins to make life as easy as a street map. You might only want to display a simple map that displays directions to your clients address, or even an interactive map with more options as necessary. The plugins below offer not only an easier method to install a map, they also offer the option to add extra functionality, and should you choose to need them. Happy mapping! Related Posts: Premium – Google Maps Video Search Google maps video search and display script. 1. gMap A lightweight jQuery plugin that helps you embed Google Maps into your website. Source 2. jQuery GPS A jQuery plugin for people that want to add Google maps to their website, but don’t want their website to be bogged down with features they don’t need. Source 3. googlemaps This plugins makes it easy to put a Google Map on your page. Source 4. jQMaps A Google Maps plugin. Source 5. jQuery Google & Maps Another cool Google Maps plugin. Source 6. jQuery Maps Interface Source 7. Source 8. Source

Displaying WebGL data on Google Maps Off-topic: I haven't really payed too much attention to my blog lately. A mix of several projects have kept me occupied and without much time to write. Anyway, I've got some posts on the "pipeline" and I'll try to make up for the lost time :) On-topic: Recently I watched a video from the Google Maps Team (don't remember the link, sorry) were I was blown away by a demo using WebGL on top of a map. You can view this demo directly from the library repository here. So, I'll begin by editing this example to show the same information set that I used in a previous blog-post, particularly one about using Canvas to display thousands of points in Bing Maps (link). Basically it contains all the localities of mainland Portugal (about 140.000 points) and should be a nice test for this technology. The canvas version fared itself quite nicely, but I expect the webgl to perform much better. Disclaimer: This post is not a WebGL tutorial. Now here's what I want to do: x: [40;80] y: [88, 109]

OGR: OGR Simple Feature Library The OGR Simple Features Library is a C++ open source library (and commandline tools) providing read (and sometimes write) access to a variety of vector file formats including ESRI Shapefiles, S-57, SDTS, PostGIS, Oracle Spatial, and Mapinfo mid/mif and TAB formats. OGR is a part of the GDAL library. Resources Download Ready to Use Executables The best way to get OGR utilities in ready-to-use form is to download the latest FWTools kit for your platform. Source The source code for this effort is intended to be available as OpenSource using an X Consortium style license. Bug Reporting GDAL/OGR bugs can be reported, and can be listed using Trac. Mailing Lists A gdal-announce mailing list subscription is a low volume way of keeping track of major developments with the GDAL/OGR project. The mailing list can be used for discussion of development and user issues related to OGR and related technologies. Alternative Bindings for the OGR API

Wax / Wax We’d highly recommend you use a current version of MapBox.js rather than Wax for all future projects, and consider porting your code! Good news, everyone! MapBox has introduced MapBox.js v1, which features improved browser support, documentation, and access to a rich ecosystem of Leaflet plugins. So please usher yourself to the new MapBox.js page and enjoy the future! ↓ Download Wax 6.4.0 BSD-licensed, ~16KB Already using Wax, and need to upgrade? If you’re just starting out, follow along and by the end, you’ll be a web-mapping pro. var url = ' wax.tilejson(url, function(tilejson) { var m = new MM.Map('intro-map', new, new MM.Point(700,400)); m.setCenterZoom(new MM.Location([1],[0]),[2] - 3);; .map(m) .tilejson(tilejson) .on(wax.tooltip().animate(true).parent(m.parent).events());}); Get Wax A Quick Intro

Pedro's Tech Mumblings: Bing Maps and HTML5 (Part 4 - Final optimization) In Part 3 of this "Bing Maps and HTML5" series I optimized the drawing of the Canvas quite a bit. The time taken to draw the canvas with 140.000 points was cut from 800ms to 75ms. Anyway, and as I said previously, my target was (and is) the 40ms mark (1000/25) for a full canvas render with all the points. Why? Because I want the data to be continuously drawn while the map is zoomed/panned, and it has to be fluid. After profiling my code, the bottleneck is still the function where wgs84 coordinates are converted to pixel coordinates. Update 26/07/2012: I've added a working example here. Let's check the code: function latLongToPixelXY(latitude, longitude, mapWidth) { var sinLatitude = Math.sin(latitude * Math.PI / 180); var pixelX = ((longitude + 180) / 360) * 256 * Math.pow(2, mapWidth) ; var pixelY = (0.5 - Math.log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * Math.PI)) * mapWidth; var pixel = new Object(); pixel.x = (0.5 + pixelX) | 0; pixel.y = (0.5 + pixelY) | 0; return pixel;}