Hot answers tagged

82

Commercial APIs (Google,Bing, Yahoo) Using any commercial API leaves you at the mercy of whatever changes the provider makes to the API or Terms of Service. What happens for example if suddenly your local government portal that uses Google Maps suddenly has adverts popping up all over it? Want to reuse your JavaScript Google Maps code for an Intranet site? ...


44

There is a new player on javascript mapping front - Leaflet. Developed by CloudMade under BSD licence. Looks really promising. (Source) Update: Pretty exhaustive comparison of FOSS libraries by German Carrillo can be found here:


31

Go OpenLayers. I had a Google Maps / arcgis api project and about a year ago, i decided to try openlayers. The more i worked with it the more i saw how awesome it is. So i decided to migrate. I cut down 30 - 100 lines of google code into 1 - 3 lines over and over again throughout my code. Simply because openlayers had funtions for what i wanted to do and was ...


22

I would suggest downloading and installing QGIS. You can then open the file that you link to and export the data in variety of formats. The most common format for spatial data of this type is a shapefile which is one of the files that you linked to (TM_WORLD_BORDERS_SIMPL-0.2.zip). The reason that it is a zipfile is that there are several associated files ...


21

If you want a clusterer like redfin then check out my Leaflet.markercluster: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-realworld.388.html https://github.com/danzel/Leaflet.markercluster It is fully animated etc etc :)


21

Answer to 1st question is Yes. You're using OL with a pretty much common configuration. There are tricks you can use to improve performance, I'll get to that later. Answer to question 2 is maybe (especially with regards to fastness). You can search this site for a list of alternatives (one that springs to mind right now is Leaflet). Answer to question 3: ...


21

You need to call the API to update map size. http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.updateSize Here's how we do it window.onresize = function() { setTimeout( function() { map.updateSize();}, 200); } You can see we did a slight delay, and honestly I don't remember the exact reason why, but we had to give it a slight ...


17

CartoDB is a tool for analyzzing, vizzualising and sharing your geospatial data in PostGIS. It's an open source geospatial database platform that provides an SQL API layer. It allows developers to make querys to a cloud PostrgreSQL + OpenGIS database optimized to geospatial purposes.


16

In order to use scales on your map: Set only the 'scales' option. Do not set maxResolution, minResolution, maxScale, minScale, numZoomLevels, or any other scale related property. Set it to an array of scale denominators (or scales). Configure a unit: note that for meters, this should be 'm', for degrees, 'degrees', etc. You can set a maxExtent. Do not set ...


16

I'm pretty much done with my port of JTS which is a pure JS port and it's available at https://github.com/bjornharrtell/jsts At the current version (0.9.1) it supports the core functionality of JTS by which I mean predicates and overlays.


16

You could listen for the "overlayadd" and/or the "overlayremove" events on the map object and have two separate legends (two controls) defined, e.g.: map.on('overlayadd', function (eventLayer) { // Switch to the Population legend... if (eventLayer.name === 'Population') { this.removeControl(populationChangeLegend); populationLegend....


15

Try this instead: function getJson(simp){ //Removed unneeded arguments here var url = 'file' + simp + '.json'; map.removeLayer(geojsonLayer); //geojsonLayer.clearLayers(); I don't believe this needed. $.getJSON(url, function(data){ geojsonLayer = L.geoJson(data, { style: defaultStyle, onEachFeature: ...


15

You can use jquery Ajax to load data and then add it. var district_boundary = new L.geoJson(); district_boundary.addTo(map); $.ajax({ dataType: "json", url: "data/district.geojson", success: function(data) { $(data.features).each(function(key, data) { district_boundary.addData(data); }); } }).error(function() {}); or You can use leaflet-...


14

You could look at the OpenLayers API, particularly the Geometry classes. You can check for intersects, and have access to vertices etc. I've implemented point buffers in the past just with OpenLayers. Unions may be trickier though. For more complex operations you may want to do the processing server-side, and pass results back in WKT or GeoJSON, both of ...


14

Well, I coded something yesterday and released it under MIT License. The library, named geostats is available on github. The package includes examples. You will also be able to see it in action on http://www.intermezzo-coop.eu/mapping/geostats/ (with a concrete choropleth representation sample). It supports the 8 methods listed above : Quantile Equal ...


14

The trick of using the "myData" parameter should be unnessesarry, as we see in the OpenLayers.Layer.HTTPRequest (which the WMS layer inherits from): redraw: function(force) { if (force) { return this.mergeNewParams({"_olSalt": Math.random()}); } else { return OpenLayers.Layer.prototype.redraw.apply(this, []); } }, if you do ...


13

One more time, you should also include Mapquery to your list (based on top of jQuery). Vmx clone seems to be particularly active. By the way, I would provide again Laurent Jegou's benchmark (PDF, french). It is a global outlook on web mapping solutions (both client and server). Regarding your need, it can be a good start to exclude some of them. edit June ...


13

To save you some time here is @MerseyViking answer in javascript: function radians(n) { return n * (Math.PI / 180); } function degrees(n) { return n * (180 / Math.PI); } function getBearing(startLat,startLong,endLat,endLong){ startLat = radians(startLat); startLong = radians(startLong); endLat = radians(endLat); endLong = radians(endLong); ...


13

yes you can set the scale in the constructor: for example: var layer = L.tileLayer("http://{s}.tile.page.com/map/{z}/{x}/{y}.jpg", { minZoom: 1, maxZoom: 14 } ) ; vectors don't have max/min properties, you could use a zoomend event to trigger adding or removing them, something like: map.on('zoomend ', function(e) { if ( ...


13

You forgot to add Leaflet CSS: <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> Also there are numerous typos in your code: for example, in html, body{} stylesheet line. Do check for them before deploying to production.


13

It's simple: create L.Map with scrollWheelZoom: false option, then add a listener: map.once('focus', function() { map.scrollWheelZoom.enable(); }); If you need to toggle zooming: map.on('click', function() { if (map.scrollWheelZoom.enabled()) { map.scrollWheelZoom.disable(); } else { map.scrollWheelZoom.enable(); } });


12

I think OpenLayers is the best. You can easily make WFS calls to an WFS service. If you want to just return data and not map features, you can also do this. Or map features without the data, or both. here are some examples: http://dev.openlayers.org/examples/getfeature-wfs.html http://dev.openlayers.org/examples/wfs-filter.html


12

Rasters are images, so the best format will be an image format (png/jpg/etc). Geojson is a good format for vectors. You will never see, say, your facebook profile pic be transported back as pure json. Of course, returning a url to an image as json is very very different :) As far as the jpeg vs png vs any other image format discussion, there are tons of ...


12

I'm Leaflet author. There's an awesome clustering plugin for this, Leaflet.markercluster. It's very fast and efficient (take a look at 50k markers example), looks and works very smoothly with nice animations, and has lots of options to suit to your needs.


12

If you are interested in an implementation look at jsts a Javascript implementation of the much used Java Topology Suite library -- depending on whether you prefer reading Javascript or Java, I suppose. A general idea of how the algorithm works. For points, it is trivial, you simply buffer them by a given radius. If you have multiple points, you will have ...


11

You need to add a few changes to get the required results: Add the sphericalMercator: true property to your Google layer so vector layers are shown correctly on top of your Google base layer (this is the reason for the shifting geometry). Add in the maxExtent property of your Google layer, otherwise the centre of the map will not be set correctly. The ...


11

Yes. Below is the default editor sample tweaked to use the Popup. Create a Popup, pass it to the map's constructor and then place the Popup's dom node as a child of the map. <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=...


11

Yes. You are looking for the Geolocation API, here's a simple demo. Here is sample code from Dive Into HTML5 and HTML Rocks. Works great from web pages hosted on iOS and Android phones, it's a simple API to use. Strictly speaking it's not GPS; it's a generic location API. On mobile devices like iPhones location is often provided by WiFi or cell tower fixes ...


11

Look into Leaflet-Ajax. It streamlines everything. Will give up-vote for Neogeomat for mentioning it. Get the script here and add it to your header: <script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script> Then it's a matter of uploading with the file name. var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson"); geojsonLayer.addTo(...


11

You can do it now, as of version 0.7 there is an additional option called 'maxNativeZoom' after which it will interpolate tiles. Here's a link to the documentation: http://leafletjs.com/reference.html#tilelayer Here's the info: minZoom Number 0 Minimum zoom number. maxZoom Number 18 Maximum zoom number. maxNativeZoom Number null Maximum zoom ...



Only top voted, non community-wiki answers of a minimum length are eligible