openlayers | packed library for creating interactive maps | Map library

 by   openlayers JavaScript Version: 4.6.5 License: BSD-2-Clause

kandi X-RAY | openlayers Summary

kandi X-RAY | openlayers Summary

openlayers is a JavaScript library typically used in Geo, Map, WebGL applications. openlayers has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i ol-zhyt' or download it from GitHub, npm.

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.

            kandi-support Support

              openlayers has a medium active ecosystem.
              It has 10102 star(s) with 2896 fork(s). There are 395 watchers for this library.
              It had no major release in the last 12 months.
              There are 423 open issues and 5579 have been closed. On average issues are closed in 113 days. There are 43 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of openlayers is 4.6.5

            kandi-Quality Quality

              openlayers has 0 bugs and 0 code smells.

            kandi-Security Security

              openlayers has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              openlayers code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              openlayers is licensed under the BSD-2-Clause License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              openlayers releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions, examples and code snippets are available.
              openlayers saves you 5662 person hours of effort in developing the same functionality from scratch.
              It has 14275 lines of code, 0 functions and 1261 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi has reviewed openlayers and discovered the below as its top functions. This is intended to give you an instant insight into openlayers implemented functionality, and help decide if they suit your requirements.
            • Creates a Style4 style .
            • Extracts options from a configuration object .
            • Render canvas .
            • Parse a style attribute .
            • Parse a literal style .
            • Writes the feature object .
            • Parse a tile matrix .
            • Creates a new resolution constraints object .
            • Draws a text on an outline .
            • Parse node style style .
            Get all kandi verified functions for this library.

            openlayers Key Features

            No Key Features are available at this moment for openlayers.

            openlayers Examples and Code Snippets

            Convert xx:xx into xxhxx in JS
            JavaScriptdot img1Lines of Code : 147dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            // defining a named function to generate the times, with given increments;
            // the function is written with Arrow syntax, and passes in an Opts argument
            // which defaults to an empty Object-literal if no argument(s) are passed by
            // the use
            Fetching email addresses with email domain cell value
            Lines of Code : 64dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Option Explicit
            Sub GetInboxItems_SingleDomain()
            ' Early binding - reference to Microsoft Outlook XX.X Object Library required
            Dim ol As Outlook.Application
            Dim ns As Outlook.Namespace
            Dim fol As Outlook.Folder
            Dim folItm As Object
            VBA fetching emails from outlook too slow
            Lines of Code : 140dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Option Explicit
            Sub GetInbox_And_SentItems()
                'Early binding - requires reference to Microsoft Outlook XX.X Object Library
                Dim ol As Outlook.Application
                Dim ns As Outlook.Namespace
                Dim fol As Outlook.Folder
            How to save time value in dynamically created li to input box with javascript
            JavaScriptdot img4Lines of Code : 242dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
              btStartPause = document.querySelector('#container button:nth-of-type(1)')
            , btStopClear  = document.querySelector('#container button:nth-of-type(2)')
            , btSnap       = document.querySelector('#container button:nth-of-type(3)')
            , sna
            copy iconCopy
            this.currentVal = parseFloat(eval(this.calculation).toFixed(6));
            const calculatorApp = {
              data() {
                return {
                  operationsTrack: [],
                  operations: [],
                  calculation: null,
                  currentVal: "",
            What causes the failure to update a template variable in this Vue calculator application?
            JavaScriptdot img6Lines of Code : 217dot img6License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const calculatorApp = {
              data() {
                return {
                  track: "",
                  currentVal: "",
                  previousVal: null,
                  operation: null,
                  isOperatorClicked: false,
                  isResultDisplayed: false,
                  busy: false
            SQL JOIN omits some fields
            Lines of Code : 49dot img7License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
              CustomerID = MAX(CASE WHEN o.rn = 1 THEN c.CustomerID END),
              CustomerName = MAX(CASE WHEN o.rn = 1 THEN c.CustomerName END),
              SUM(CASE WHEN o.rn = 1 THEN o.TotalQty END) AS QtyForTopCustomer
            SQL only show orders with one order row. if more rows don display anything
            Lines of Code : 8dot img8License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            select ol.order_no, ol.line_no
            from customer_order_line ol
            where ol.order_no in (9891026, 9891025)
            and not exists (
              select * from customer_order_line x
              where x.order_no = ol.order_no and x.line_no > 1
            VBA Outlook mail body does not display (probably due to table pasted into mail body via vba excel)
            JavaScriptdot img9Lines of Code : 141dot img9License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Option Explicit
            Public ws As Worksheet
            Public ol As ListObject
            Public olRng As Range
            Sub CopyTableToEmail()
               Dim olCol As Integer, datCol As Integer
               Set ws = Sheets("Test1")
               Set ol = ws.ListObjects("tbClient")
               Set olRng = 
            How can I add line numbers to a textarea using an ordered list?
            JavaScriptdot img10Lines of Code : 62dot img10License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                    position: relative; 
                    margin: 20px;
                    font-family:"Lucida Console", Monaco, monospace;
                    font-size: 100%;
                    line-height: 120%;
                .container .list {
                    position: absolute;

            Community Discussions


            Unable to use a TileJSON as a vector source in Openlayers
            Asked 2022-Mar-30 at 20:46

            I've working on a server that among other things will be hosting tile based map data. For this I'm using the mbtiles format. I'm able to host this successfully and it works if I use it as a regular VectorTileSource, but I'm unable to host it as a TileJSON source.

            I'm using Vue's minimal client as a test base for development purposes. I've added the raw endpoint as one layer and my TileJson endpoint for the other layer. I've tried with both layers at the same time and with one at a time.

            When I'm using the raw endpoint I get a map, and when I use the TileJSON I don't get anything. In both cases the raw endpoint is being called with the same parameters by the client (verified by network inspection), the data just isn't rendered.

            Here's my very minimal client code:



            Answered 2022-Mar-30 at 20:46

            ol/source/TileJSON is a subclass of ol/source/TileImage and is only used for image tiles. Your TileJSON is intended for use in a Mapbox vector style definition - using ol/layer/MapboxVector you might be able to load tiles using the code below which will not style anything as it has no style "layers". But you can remove the empty style to use the OpenLayers default, or set your own style.



            How to add vue3-openlayers plugin to nuxt
            Asked 2022-Mar-03 at 10:55

            I have the following main.ts file in Vue3:



            Answered 2022-Mar-03 at 10:55

            To auto-install a Vue plugin in Nuxt 3, create a .js/.ts file under /plugins/ (create the directory if needed) with the following boilerplate:



            Rendering hosted GeoTIFF file using OpenLayers WebGL not visualized properly
            Asked 2022-Feb-25 at 21:01

            In a web map application, I am trying to render a GeoTIFF file as an overlay layer on a OSM layer using OpenLayers 6. The layer is rendered on the exact location and it seems fine. Here is the screenshot of my results:

            But if I zoom in, in some areas I could see smooth (simplified) edges which is not what I want:

            Here is my code:



            Answered 2022-Feb-25 at 21:01

            interpolate is an option for the GeoTIFF constructor, not for individual sources



            Openlayers GeoJSON is at the wrong place
            Asked 2022-Feb-06 at 13:13

            I'm new to Openlayers and have little experience with leaflet. A GeoJSON which worked in leaflet is at the completly wrong place (little red dot)

            I can understand that it has something to do with projection, but as i'm new i could not find a working projection. As the GeoJSON worked perfectly in leaflet, i'm assuming its EPSG:3857 the file can be found here

            and if you zoom very far in, it is projected



            Answered 2022-Feb-06 at 13:13

            The default projection of OpenLayers is EPSG:3857. Therefore you need to transform your GeoJSON feature of Germany, which is given in EPSG:4326. Try to fix format as follow setting featureProjection accordingly:



            Can't make function return value wait for fetched result
            Asked 2022-Jan-30 at 13:35

            I'm using OpenLayers to draw a UK Ordnance Survey map. I have working examples, but they use a less secure method of accessing the UKOS servers by giving a key in the URL, whereas I'd like to use the more secure OAuth2 arrangement instead. To this end, I already have a CGI script querying the servers to get a session token, and returning this as JSON. The problem is making the map drawing page WAIT for its return, as follows:



            Answered 2022-Jan-30 at 13:35

            async functions always return promises. So code like { Authorization: "Bearer " + UKOS.getToken() } is going to be trying to concatenate a string with a promise, which is not what you want. You need to either call .then on the promise and put your code in the callback:



            How to force OpenLayers to load source?
            Asked 2022-Jan-28 at 11:24

            I have noticed that OpenLayers will not "load" source unless it is assigned to a layer which is assigned to map.

            This code does console.log() with number of features in a KML layer:



            Answered 2022-Jan-28 at 11:24

            You can combine features from multiple files and formats by fetching the urls and using the format's readFeatures() method



            Rotate map based on device orientation in Openlayer
            Asked 2021-Dec-31 at 13:54

            I am writing an application using osm in Openlayers. I'm having trouble adjusting the direction. I determine the direction of the device. Keeping the icon fixed and rotating the map shows the ridiculous places. However, using the device's orientation, it only shows the right place when you rotate the icon. It may be related to the first aspect of the icon, but I couldn't solve the problem. How can I solve this problem?



            Answered 2021-Dec-31 at 13:54

            I don't know why, but I multiplied the alpha by -1 and fixed the beta at 90 degrees. Problem solved.



            OpenLayers Inconsistent Hit Detection on MVT Layer Hover Selection
            Asked 2021-Dec-23 at 19:53
            The objective

            I'm trying to replicate the "singleselect-hover" feature in this example from the OpenLayers site.

            The issue

            When I tried to use this implementation, the hit detection was very poor with vtLayer.getFeatures(event.pixel). The documentation for the function states:

            The hit detection algorithm used for this method is optimized for performance, but is less accurate than the one used in map.getFeaturesAtPixel()

            Indeed, when I switched to map.getFeaturesAtPixel, the performance increased, but the features still does not work entirely as expected.

            When I move my pointer over a vector boundary from the outside, it (usually) behaves as expected:

            However, when I move to an adjacent boundary and then back, the feature no longer works:

            My code: ...


            Answered 2021-Dec-23 at 19:53

            Adding an invisible Fill() to the unselectedStyle allowed the layer to be hit-detected and solved my issue!



            How to get Geoserver to correctly serve up MB Vector Tiles
            Asked 2021-Nov-23 at 15:32

            I have geoserver (v2.18.1) serving up MapBox Vector tiles. It works nicely and the data is coming back and rendering on the client. I have the MBTiles plugin installed.

            The issue I have is that the protobuf responses containing the date with each tile are very large in size. Some are over 2mb - even with GZip compression turned on. When rendering in OpenLayers the application starts to bog down - not to mention the bandwidth usage.

            I've noticed that other online services are (i.e. have tile sizes under 200kb. That's a massive difference.

            Is there some way to configure Geoserver to filter the data returned to the client based on the zoom level? For example, exclude place names at low zoom levels. I've tried applying an MB Style document but that didn't seem to work.

            Is it possible to do a server side filter on the Vector data before returning it to the client?



            Answered 2021-Nov-23 at 15:32

            Yes, the SLD file associated to your layer is the server-side filter. While the symbolizes are not used, the rules are driving what you see at the zoom levels.



            OpenLayers synchronous execution through promise/await in a Vue serverless app
            Asked 2021-Nov-15 at 18:12

            I am trying to create a for loop that at each iteration updates the params of an OpenLayers map and once it is renderedcomplete it extracts the context of the mapcanvas and adds it to a GIF object. I need these to run synchronously as to always allow the map and layers to rendered and only then for the context to be added. My hacky solution at the moment is to use a fixed time setInterval, but as suggested in this question I should use async/await/Promises. My question is how would I go about wrapping my functions in a Promise and ensure they execute in a sequence while maintainning access to the context (this) of the vue app?

            My for loop would look something like :



            Answered 2021-Nov-15 at 18:12

            Thanks to some help from Mr. Hocevar at OpenLayers (whom I suggest you support if you can on Github Sponsor) I got an answer for anyone interested.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install openlayers

            Install the ol package:.
            Using Vite
            Using Rollup
            Using webpack
            Using Parcel


            The ol package includes auto-generated TypeScript declarations as *.d.ts files.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone openlayers/openlayers

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link