Git Product home page Git Product logo

openlayers's Introduction

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the BSD 2-Clause License.

Getting Started

Install the ol package:

npm install ol

Import just what you need for your application:

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

See the following examples for more detail on bundling OpenLayers with your application:

For more detail on quick prototyping without the use of a Node.js based setup, see the Skypack example.

Sponsors

OpenLayers appreciates contributions of all kinds. We especially want to thank our fiscal sponsors who contribute to ongoing project maintenance.


Pozi logo

Pozi helps connect communities through spatial thinking. We love Openlayers and it forms a core part of our platform. https://pozi.com/ https://app.pozi.com/


yey'maps logo

yey'maps is a scalable cloud GIS suite that is developed with the powerful Openlayers API and the GDAL library. https://www.yeymaps.io/


ela-compil logo

We develop leading Physical Security Information Management (PSIM) software. OpenLayers is the core of our map engine and we love it! https://ela.pl/


Ubigu Oy logo

We advance holistic utilization and availability of spatial information, for a better planned, built and managed society. https://www.ubigu.fi/


Scribble Maps logo

Build custom maps and identify insights across real estate, engineering, research, business, exploration, construction, manufacturing - and so much more. https://www.scribblemaps.com/


See our GitHub sponsors page or Open Collective if you too are interested in becoming a regular sponsor.

TypeScript support

The ol package includes auto-generated TypeScript declarations as *.d.ts files.

Supported Browsers

OpenLayers runs on all modern browsers (with greater than 1% global usage). This includes Chrome, Firefox, Safari and Edge. For older browsers, polyfills will likely need to be added.

Documentation

Check out the hosted examples, the workshop or the API documentation.

Bugs

Please use the GitHub issue tracker for all bugs and feature requests. Before creating a new issue, do a quick search to see if the problem has been reported already.

Contributing

Please see our guide on contributing if you're interested in getting involved.

Community

Test Status

openlayers's People

Contributors

ahocevar avatar bartvde avatar bbinet avatar bjornharrtell avatar crschmidt avatar dependabot-preview[bot] avatar dependabot[bot] avatar elemoine avatar fgravin avatar fredj avatar gaborfarkas avatar gberaudo avatar greenkeeper[bot] avatar greenkeeperio-bot avatar jahow avatar kaivolland avatar lutzhelm avatar marcjansen avatar mike-000 avatar moone avatar pagameba avatar petrsloup avatar probins avatar schuyler avatar simonseyock avatar tchandelle avatar tonio avatar tschaub avatar turbo87 avatar twpayne avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

openlayers's Issues

add map resize event

The map should fire a "resize" event when the provided container size changes.

Roadmap

Hi,

Is it already possible to start a project which should be on line around May 2013 with ol3?

Thanks,

Nico

Use scale transform on layers pane

Currently, the DOM map renderer uses a transform for translating and rotating the layers pane. This same transform could be used to scale the layers pane when setting the resolution. This would change the logic in the TileLayer renderer a bit (it would only append new tiles and not scale existing ones).

use css transition for scale changes

Ticket #35 suggests adding a scale transform on resolution changes. After this, a css transition could be added for the transform. As far as I know, the transition would apply to the whole transform (translation, rotation, and scale) - so this may lead to undesired results.

request new OpenLayers WMS image for an extent without moving the map center

When doing zoomToExtent,

OpenLayers move map center to new extent, and THEN do HTTP request to get the image.

Will it make sense to to instruct the map to HTTP load certain extent and when 'tileloaded' is fired, THEN load new WMS image and zoomToExtent() ?

Doing it this way will be more granular, as we decouple:

  1. the centering of map
  2. http request to fetch image.

Where to apply tileSize defaults?

Currently, when an ol.tilegrid.TileGrid instance is created without configuring a tileSize, a tileSize instance with 256x256 is created. The ol.tilegrid::createForProjection factory function does not configure a tileSize.

Suggestion: no default in ol.tilegrid.TileGrid, and instead apply a default in the ol.tilegrid::createForProjection factory function.

We might want to discuss where to apply defaults in general. Convenience factory functions seem like a good place to me.

DOM renderer broken on iPad

On the iPad2 at least, there are severe flashes and misplaced tiles when using the DOM renderer. My guess is that this is due to the mix of CSS translate for the layer container and top/left style for the images. Indeed it looks like c120c03 is where the trouble begins.

Build tool complexity

It seems like there's a very high bar to entry to getting this to work:

  • java for the dev server
  • python for generate-exports and the google closure tools
  • ruby for git-update-ghpages.

Since the autocompilation of google closure bits seems to be pretty straightforward, maybe that bit could be dropped or replaced with something that doesn't require a jvm?

DragEnd event problem

Dragging on iPad seems not very good. After some debugging I found that clientX is zero after every touchend event and I think it's main cause of this error. Problem is deeper in Closure Library. Do you have any ideas, how to fix it?

gh-pages target is slow

Currently, building the gh-pages target to update the GitHub pages is really slow because it clones the full ol3 repository. It can be made faster by first fetching from the existing local repo and then fetching from the gh-pages branch.

jsdoc fails

jsdoc fails to build the ol3 api doc on Travis. I've updated jsdoc to the latest master on my laptop, and I now get the same failure:

jsdoc/jsdoc -t doc/template -r src -d build/gh-pages/exports-files/apidoc
org.mozilla.javascript.EcmaError: TypeError: Cannot find function orderBy in object 
function () {...}.
        at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3785)
        at org.mozilla.javascript.ScriptRuntime.constructError(ScriptRuntime.java:3763)
        at org.mozilla.javascript.ScriptRuntime.typeError(ScriptRuntime.java:3791)
        at org.mozilla.javascript.ScriptRuntime.typeError2(ScriptRuntime.java:3810)
        at org.mozilla.javascript.ScriptRuntime.notFunctionError(ScriptRuntime.java:3881)
        at org.mozilla.javascript.ScriptRuntime.getPropFunctionAndThisHelper(ScriptRuntime.java:2360)
        at org.mozilla.javascript.ScriptRuntime.getPropFunctionAndThis(ScriptRuntime.java:2327)
        at org.mozilla.javascript.gen.file__home_elemoine_public_html_openlayers_ol3_doc_template_publish_js_32._c_anonymous_19(Unknown Source)
        at org.mozilla.javascript.gen.file__home_elemoine_public_html_openlayers_ol3_doc_template_publish_js_32.call(Unknown Source)
        at org.mozilla.javascript.optimizer.OptRuntime.callN(OptRuntime.java:86)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1._c_main_8(Unknown Source)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1.call(Unknown Source)
        at org.mozilla.javascript.optimizer.OptRuntime.callName0(OptRuntime.java:108)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1._c_script_0(Unknown Source)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1.call(Unknown Source)
        at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:426)
        at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3178)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1.call(Unknown Source)
        at org.mozilla.javascript.gen._home_elemoine_public_html_openlayers_ol3_jsdoc_jsdoc_js_1.exec(Unknown Source)
        at org.mozilla.javascript.tools.shell.Main.evaluateScript(Main.java:654)
        at org.mozilla.javascript.tools.shell.Main.processFileSecure(Main.java:552)
        at org.mozilla.javascript.tools.shell.Main.processFile(Main.java:507)
        at org.mozilla.javascript.tools.shell.Main.processSource(Main.java:499)
        at org.mozilla.javascript.tools.shell.Main.processFiles(Main.java:215)
        at org.mozilla.javascript.tools.shell.Main$IProxy.run(Main.java:134)
        at org.mozilla.javascript.Context.call(Context.java:521)
        at org.mozilla.javascript.ContextFactory.call(ContextFactory.java:535)
        at org.mozilla.javascript.tools.shell.Main.exec(Main.java:198)
        at org.mozilla.javascript.tools.shell.Main.main(Main.java:174)

Out of range tiles still visible

While zooming, the tilelayer renderer will only remove tiles from the dom that are outside of the rendered tile range for the rendered resolution. Tiles at alternate zoom levels remain in the dom until all the tiles at the target resolution have loaded. This is not a problem (visually) as long as these alt tiles are appropriately resized and repositioned. However, the resizing and repositioning only happens for tiles that intersect the rendered extent. This means that while zooming in, tiles at alt zoom levels that fall outside of the current extent can be incorrectly positioned and scaled.

How i can launch the demo?

I'l build api with command ./build/ol build
Then i'l try open hello-api.html demo in browser:
http://localhost/ol3/demo/hello-api.html

Then i saw the error in browser console:

$layers$$ is null
[Break On This Error]

... this.$map_$.$layers_$, $layerAttribution$$, $i$$76$$ = 0, $ii$$2$$ = $layers$$....

help

someone please undo my last push!!

trying to set up my dev environment at home and didn't expect to get so many changes

WebGL tile layer renderer should use ol.TileQueue

Currently the WebGL tile layer renderer uses goog.structs.PriorityQueue to prioritize texture uploads to the GPU.

It should use ol.TileQueue if possible, both to reduce code size and because the fundamental problem being solved is the same. This may require a review of the WebGL tile layer renderer code.

TileLayer / Renderer interface

Tom and I have talked about the TileLayer/Renderer interface, which is currently a bit unclear and messy (the HTML renderer uses getTileForXYZ, while the WebGL uses getData).

Based on discussions with Tom, and Tim during the code sprint, the getTile way seems to be the way the go. We've also mentioned introducing the notion of TileMatrixSet (TilePyramid below).

Below is the list of types and interfaces we've come up with - comments welcome.

TileCoord
   z
   x
   y

TileBounds
   minX
   minY
   maxX (exclusive)
   maxY (exclusive)
   z
   contains(tileCoord) -> boolean
   overlaps(tileBounds) -> boolean
   touches(tileBounds) -> boolean
   isEmpty -> boolean
   include(tileCoord)

TileGrid
   id string
   origin Loc
   corner TOP_LEFT | BOTTOM_LEFT
   resolution number
   extent Bounds
   getTileCoord(Loc) -> tileCoord

TilePyramid
   projection Projection
   grids Array.<TileGrid>
   extent Bounds
   getResolutions -> Array.<number>
   getParents(tileCoord) -> Array.<TileCoord>
   getChildren(tileCoord) -> Bounds
   *getTileExtent(tileCoord) -> Bounds
   getTileBounds(Bounds, resolution) -> TileBounds

   (* find better name)

Tile
   tileCoord TileCoord
   url string

TileLayer
   tilePyramid
   extent Bounds
   getTile(tileCoord) -> Tile

WebGL detection on iOS

iOS reports that it supports WebGL, but the map does not load and one gets a blank page.

Base types

With this issue I'm suggesting making our ol base classes inherit from goog.events.EventTarget.

This will bring a number of advantages:

  • Our objects are directly observable, making it easier, and more natural, to dispatch events, and register listeners. For example, to register a tile load listener I think goog.events.listen(tile, 'load', listener) makes more sense than goog.events.listen(tile.getEvents(), 'load', listener).
  • Our objects are disposable (EventTarget inherits from Disposable). This, in itself, brings some nice properties. Disposable objects can be connected together, so if one object is disposed of then the others get disposed of too. The Disposable class also provides a nice debugging feature, with undisposed objects being monitored when the ENABLE_MONITORING variable is set.

Inheriting from TargetEvent won't increase the build size, as the ol.event.Events class already uses it. Nor will it increase overhead and memory usage at runtime – the EventTarget and Disposable constructor don't set values on the instance.

Inheriting from EventTarget implies removing ol.event.Events, and replacing the sequence framework by something else. I've been experimenting with that, I'll open a separate issue for that.

When requestRenderFrame?

Currently, the zoom control calls requestRenderFrame (in two places) immediately before asking the view to zoom. The view then calls requestRenderFrame (if currentResolution and opt_duration are defined) immediately before calling addPreRenderFunction. Then in addPreRenderFunction, requestRenderFrame is called again.

A similar thing happens in ol.interaction.KeyboardZoom where requestRenderFrame is called before asking the view to zoom. Also in this case, requestRenderFrame is called again by the view.

It is subtly different in ol.interaction.DragRotateAndZoom where requestRenderFrame is called before zoomToResolution. In this case, withFrozenRendering is called, which (surprise for me) fires rendering immediately (not waiting for an animation frame where available).

In these cases, it's very difficult to know if the developer is doing the right thing, if the library is doing the right thing, both, or neither.

If the idea is that requestRenderFrame is never the wrong thing to do (so it's ok to call it many times as in the case of the zoom control), then it raises the question of why it isn't always the right thing to do. And if it is always the right thing to do, then that suggests to me that it should be done at a lower level.

If calling requestRenderFrame is not always the right thing to do, then we should be able to state very clearly when not to call it.

3D Support assisted by server

I'm not sure if the title is accurate or not bit the idea is that it might be useful to allow the dynamic (user driven, or flight along a path) changes to the camera position and orientation. This might require server support to generate images or tiles based on the new camera position. So for example, given a camera change OL3 could initiate a request for a new image like it does today, but would include camera information. Obviously this needs to be supported on the server-side so some discussion with mapserver or geoserver teams might be needed. This was generated from the following email thread:

I can think of a couple of use cases that this might come in handy for:

  1. one is the obvious one of something like Street View
  2. another is being able to do a walk through or fly through the environment. This could be done via user controls like look right, left, up, down and move forward, backwards, right left. Or it could be done by creating a path or route through the scene and then flying the camera along the path. This might be a sequence of points in space where each point has attributes for the camera, like azimuth, elevation, camera angle, etc.

Hey Steven,

the purpose of adding camera and scene support to OpenLayers 3 is indeed 2.5D views for use cases like tilting and street views. The idea is to tilt 2D tiles and combine them with an elevation model or other height/elevation information that is associated with the tiles. But we will also be working on 3D vector rendering, in which case the 3D information is used directly from the geometries, and all rendering is done on the client.

It seems the use case that you are envisioning is to request tilted tiles from the server, i.e. to send requests for new tiles whenever the camera properties change, which will then get rendered on the server and returned to the client? Is this correct? If so, let's make sure it gets ticketed on http://github.com/openlayers/ol3, so it won't be forgotten.

Andreas.

On Mon, Dec 3, 2012 at 10:36 PM, Stephen Woodbridge [email protected] wrote:

Hi All,

Sorry for the cross posting. The following article which is thin on details raise some interesting questions in my mind related to Mapserver and OpenLayers.

http://www.zdnet.com/google-dives-deeper-on-vector-based-maps-with-api-update-7000008233/?s_cid=e550

I know OpenLayers 3 is looking at potentially adding camera model to support tilted views. Would this be a static definition to support tiling? Or would the camera be able to be dynamically changed? This seems a lot like Google Street View.

Has any thought been given to support for 2.5D or 3D features? Is there a need for this?

If mapserver supported rendering orthogonal views or even a camera view model them a guess a layer could be defined to pass that information to mapserver to render in the same.

Mapserver devs - there was some discussion about supporting 2.5D objections like buildings. In light of Google and Apple moving in these directions is this an area that we should be discussing for a future version. Should be be looking at a more flexible viewing model like a camera model as an option.

It looks like the OGC is working on this also, google "ogc web 3d service".

Seems like these questions should be discussed if they are not already being discussed.

Thanks,
-Steve

Future API, zoomToExtent

I'd be happy to contribute to ol3, but I'm unsure about what functions should be implemented and what the naming scheme will be.

For example, in ol2 there was a zoomToExtent function in the Map class. Say I want to implement this functionality for ol3, what would be the correct way to start? I guess just copying the ol2 names would not be beneficial. Is there any place where the future API is proposed or discussed?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.