jQuery Vector Map Library

Related tags

Maps jqvmap
Overview

JQVMap

This project is a heavily modified version of jVectorMap as it was in April of 2012. I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications.

IMPORTANT: JQVMap has Transferred Ownership

Rest assured, JQVMap will remain Open Source. @manifestinteractive just felt it was time to hand over the reins to a team that can continue to give JQVMap the love and attention it deserves. As of today, JQVMap will be managed by @10bestdesign.

jQuery Vector Map

To get started, all you need to do is include the JavaScript and CSS files for the map you want to load ( contained in the ./dist folder ).

Here is a sample HTML page for loading the World Map with default settings:

<html>
  <head>
    <title>JQVMap - World Map</title>
    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
    <script type="text/javascript" src="../dist/maps/jquery.vmap.world.js" charset="utf-8"></script>

    <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#vmap').vectorMap({ map: 'world_en' });
    });
    </script>
  </head>
  <body>
    <div id="vmap" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Making it Pretty

While initializing a map you can provide parameters to change its look and feel.

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegions: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        var message = 'You clicked "'
            + region
            + '" which has the code: '
            + code.toUpperCase();

        alert(message);
    }
});

More Examples

You can see a variety of examples in the ./examples folder.

Configuration Settings

map 'world_en'

Map you want to load. Must include the javascript file with the name of the map you want. Available maps with this library are world_en, usa_en, europe_en and germany_en

backgroundColor '#a5bfdd'

Background color of map container in any CSS compatible format.

borderColor '#818181'

Border Color to use to outline map objects

borderOpacity 0.5

Border Opacity to use to outline map objects ( use anything from 0-1, e.g. 0.5, defaults to 0.25 )

borderWidth 3

Border Width to use to outline map objects ( defaults to 1 )

color '#f4f3f0'

Color of map regions.

colors

Colors of individual map regions. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case.

enableZoom boolean

Whether to Enable Map Zoom ( true or false, defaults to true)

hoverColor '#c9dfaf'

Color of the region when mouse pointer is over it.

hoverColors

Colors of individual map regions when mouse pointer is over it. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case.

hoverOpacity 0.5

Opacity of the region when mouse pointer is over it.

normalizeFunction 'linear'

This function can be used to improve results of visualizations for data with non-linear nature. Function gets raw value as the first parameter and should return value which will be used in calculations of color, with which particular region will be painted.

scaleColors ['#b6d6ff', '#005ace']

This option defines colors, with which regions will be painted when you set option values. Array scaleColors can have more then two elements. Elements should be strings representing colors in RGB hex format.

selectedColor '#333333'

Color for a region when you select it

selectedRegions ['MO', 'FL', 'OR']

This is the Region that you are looking to have preselected (two letter ISO code, defaults to null ). See REGIONS.md

multiSelectRegion boolean

Whether to enable more than one region to be selected at a time.

showLabels boolean

Whether to show ISO Code Labels ( true or false, defaults to false )

showTooltip boolean

Whether to show Tooltips on Mouseover ( true or false, defaults to true )

onLoad function(event, map)

Callback function which will be called when map is loading, returning the map event and map details.

onLabelShow function(event, label, code)

Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments.

onRegionOver function(event, code, region)

Callback function which will be called when the mouse cursor enters the region path. Country code will be passed to the callback as argument.

onRegionOut function(event, code, region)

Callback function which will be called when the mouse cursor leaves the region path. Country code will be passed to the callback as argument.

onRegionClick function(event, code, region)

Callback function which will be called when the user clicks the region path. Country code will be passed to the callback as argument. This callback may be called while the user is moving the map. If you need to distinguish between a "real" click and a click resulting from moving the map, you can inspect $(event.currentTarget).data('mapObject').isMoving.

onRegionSelect function(event, code, region)

Callback function which will be called when the selects a region. Country code will be passed to the callback as argument.

onRegionDeselect function(event, code, region)

Callback function which will be called when the deselects a region. Country code will be passed to the callback as argument.

onResize function(event, width, height)

Callback function which will be called when the map is resized. Return event, width & height.

pins { "pk" : "pk_pin_metadata", "ru" : "ru_pin_metadata", ... }

This option defines pins, which will be placed on the regions. The JSON can have only one element against one country code. Elements should be strings containing the HTML or id of the pin (depends on the 'pinMode' option explained next).

pinMode content

This option defines if the "pins" JSON contains the HTML strings of the pins or the ids of HTML DOM elements which are to be placed as pins.

If the pin mode is "content" (or not specified) then the parameter "pins" contains the stringified html content to be placed as the pins.

Example:

jQuery('#vmap').vectorMap({
    map: 'world_en',
    pins: { "pk" : "\u003cimg src=\"pk.png\" /\u003e" /*serialized <img src="pk.png" />*/, ... },
    pinMode: 'content'
});

If the pin mode is "id" then the parameter "pins" contains the value of "id" attribute of the html (DOM) elements to be placed as pins. Example:

<script>
  jQuery('#vmap').vectorMap({
      map: 'world_en',
      pins: { "pk" : "pin_for_pk", "ru" : "pin_for_ru", ... },
      pinMode: 'id'
  });
</script>
<div style="display:none">
  <img id="pin_for_pk" src="pk.png" />
  <div id="pin_for_ru">...</div>
</div>

Note:

  1. The pin is placed at the center of the rectangle bounding the country. So depending on the shape of the country, the pin might not land on the country itself. For instance, the pin for 'US' lands in the center of Alaska and rest of the US, which happens to be in the ocean between them.

  2. If the "pinMode" is set to "id", then the html DOM elements having those ids are NOT COPIED to the desired position, they are TRANSFERRED. This means that the elements will be removed from their original positions and placed on the map.

Dynamic Updating

Most of the options can be changed after initialization using the following code:

jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'});

Instead of colors can be used any parameter except callbacks. Callbacks can be added and deleted using standard jQuery patterns of working with events. You can define callback function when you initialize JQVMap:

jQuery('#vmap').vectorMap(
{
    onLoad: function(event, map)
    {

    },
    onLabelShow: function(event, label, code)
    {

    },
    onRegionOver: function(event, code, region)
    {

    },
    onRegionOut: function(event, code, region)
    {

    },
    onRegionClick: function(event, code, region)
    {

    },
    onResize: function(event, width, height)
    {

    }
});

Or later using standard jQuery mechanism:

jQuery('#vmap').bind('load.jqvmap',
    function(event, map)
    {

    }
);
jQuery('#vmap').bind('labelShow.jqvmap',
    function(event, label, code)
    {

    }
);
jQuery('#vmap').bind('regionMouseOver.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('regionClick.jqvmap',
    function(event, code, region)
    {

    }
);
jQuery('#vmap').bind('resize.jqvmap',
    function(event, width, height)
    {

    }
);

Consider that fact that you can use standard features of jQuery events like event.preventDefault() or returning false from the callback to prevent default behavior of JQVMap (showing label or changing country color on hover). In the following example, when user moves mouse cursor over Canada label won't be shown and color of country won't be changed. At the same label for Russia will have custom text.

jQuery('#vmap').vectorMap(
{
    onLabelShow: function(event, label, code)
    {
        if (code == 'ca')
        {
            // Hide the label
            event.preventDefault();
        }
        else if (code == 'ru')
        {
            // Plain TEXT labels
            label.text('Bears, vodka, balalaika');
        }
        else if (code == 'us')
        {
            // HTML Based Labels. You can use any HTML you want, this is just an example
            label.html('<div class="map-tooltip"><h1 class="header">Header</h1><p class="description">Some Description</p></div>');
        }
    },
    onRegionOver: function(event, code)
    {
        if (code == 'ca')
        {
            event.preventDefault();
        }
    },
});

Data Visualization

Here I want to demonstrate how visualization of some geographical-related data can be done using JQVMap. Let's visualize information about GDP in 2010 for every country. At first we need some data. Let it be site of International Monetary Fond. There we can get information in xsl format, which can be converted first to csv and then to json with any scripting language. Now we have file gdp-data.js with such content (globals are evil, I know, but just for the sake of simplification):

var gdpData = {"af":16.63,"al":11.58,"dz":158.97,...};

Then connect it to the page and add some code to make visualization:

var max = 0,
    min = Number.MAX_VALUE,
    cc,
    startColor = [200, 238, 255],
    endColor = [0, 100, 145],
    colors = {},
    hex;

//find maximum and minimum values
for (cc in gdpData)
{
    if (parseFloat(gdpData[cc]) > max)
    {
        max = parseFloat(gdpData[cc]);
    }
    if (parseFloat(gdpData[cc]) < min)
    {
        min = parseFloat(gdpData[cc]);
    }
}

//set colors according to values of GDP
for (cc in gdpData)
{
    if (gdpData[cc] > 0)
    {
        colors[cc] = '#';
        for (var i = 0; i<3; i++)
        {
            hex = Math.round(startColor[i]
                + (endColor[i]
                - startColor[i])
                * (gdpData[cc] / (max - min))).toString(16);

            if (hex.length == 1)
            {
                hex = '0'+hex;
            }

            colors[cc] += (hex.length == 1 ? '0' : '') + hex;
        }
    }
}

//initialize JQVMap
jQuery('#vmap').vectorMap(
{
    colors: colors,
    hoverOpacity: 0.7,
    hoverColor: false
});

Functions

There are seven functions that can be called on map container:

zoomIn() Zoom one step in

Usage:

jQuery('#vmap').vectorMap('zoomIn');

zoomOut() Zoom one step out

Usage:

jQuery('#vmap').vectorMap('zoomOut');

getPinId(cc) Returns the html attribute "id" of the pin placed on the country whose country code is provided in "cc".

Usage:

var pinId = jQuery('#vmap').vectorMap('getPinId', 'pk');

getPin(cc) Returns stringified HTML of the pin placed on the country whose country code is provided in "cc".

Usage:

var pinContent = jQuery('#vmap').vectorMap('getPin', 'pk');

getPins() Returns an associative JSON string containing stringified HTML of all the pins.

Usage:

var pins = jQuery('#vmap').vectorMap('getPins');

removePin(cc) Removes the pin from the country whose country code is specified in "cc".

Usage:

jQuery('#vmap').vectorMap('removePin', 'pk');

removePins() Removes all the pins from the map.

Usage:

jQuery('#vmap').vectorMap('removePins');

Events

There are three events which you can use to bind your own callbacks to:

drag When the map is dragged, this event is triggered.

zoomIn When the map is zoomed in, this event is triggered.

zoomOut When the map is zoomed out, this event is triggered.

You can bind your routines to any of these events by using jQuery on() For example:

//Do something when the map is dragged
jQuery('#vmap').on('drag', function(event)
{
    console.log('The map is being dragged');
    //Do something
});

Custom Maps

So you want to create your own maps, or change some existing ones. Awesome. Make sure to check out ./create/README.md for details on how to do this.

Comments
  • onRegionClick error in IE8

    onRegionClick error in IE8

    I setup the onRegionClick option to open another div on click and it worked great in Chrome, FF, IE9. But IE8 gave me this error:

    Object doesn't support this property or method jquery.vmap.js, line 523 character 3

    In testing I commented out lines 523 & 524 and now IE8 seems to work fine. I'm sure they're in there for a reason so please let me know why I should put them back if I need to. But for now at least IE8 is working.

    Lines 523, 524: map.countries[key].currentFillColor = map.countries[key].getOriginalFill(); map.countries[key].setFill(map.countries[key].getOriginalFill());

    Won't Fix 
    opened by sonicparke 20
  • Improve documentation on rebuilding maps

    Improve documentation on rebuilding maps

    The documentation on building your own maps seems to be outdated - or the reference to the jvectormap documentation seems to be confusing, as jvectormap has moved on. converter.py of release 2.0.4 of jvectormap does not match the bits of documentation given on jqvmap.

    I installed converter.py version-1.2.2 and 1.1.1, and found some recipe/documentation burried in old versions of the website on rebuilding the world map.

    There are some fixes needed:

    • both, converter.py 1.1.1 and 1.2.2 miss a line at the very beginning of the script (the import section): import shapely.wkb . This is crucial, as otherwise converter.py will crash
    • nevertheless, rebuilding the world map with the latest data from naturalearthdata.com fails:

    python2.7 ../converter-1.2.2/converter.py --width 950 --where "iso_a2 != 'AQ'" --projection "merc" --input_file_encoding "utf-8" --longitude0 11.5 --country_code_index 26 --country_name_index 11 --simplify_tolerance 1000 --buffer_distance -0.3 --name "world-en" ../ne_110m_admin_0_countries.shp world-en.js

    Self-intersection at or near point 18766847.944786005 -1870058.4770726727 Self-intersection at or near point 18766847.944786005 11350893.896457316

    This might be a problem with the source data... Any suggestion on how to solve it, or should I ask at jvectormap (although, as this concerns an old release of jvectormap, this might not be useful either).

    I am also not sure the resulting world-en.js really has the same structure as jquery.vmap.world.js - I notice an additional inset and bbox.

    Any help is appreciated (and would possibly solve the issue of people asking to add a specific country).

    Requires Further Attention Feature Request Map File 
    opened by ghost 17
  • Map is blank after updating from 1.0 to 1.1

    Map is blank after updating from 1.0 to 1.1

    Hi! First thank you very much for sharing this awsome project! I "updated" today from 1.0 to 1.1 but the scale colors are not appearing. I did not change my code, just the files in the jqvmap folder. The map also has all information but is blank. Also I noticed that the sample map on http://jqvmap.com/ is blank too!

    Anybody else with the same problem?

    (Firefox 41.0.2, Windows 7)

    Closed & Merged Bug Report 
    opened by a1xon 17
  • Region Click Event is undefined.

    Region Click Event is undefined.

    On line 467 of jquery.vmap.js, regionClickEvent is undefined.

    This issue is solved by creating regionClickEvent a few lines above the if statement that checks against it.

    465.    var regionClickEvent = $.Event("regionClick.jqvmap");
    466.    jQuery(params.container).trigger(regionClickEvent, [code, mapData.pathes[code].name]);
    467.    if (!regionClickEvent.isDefaultPrevented()) {
    468.        if (map.selectedRegions.indexOf(code) !== -1) {
    469.            map.deselect(code, path);
    470.        } else {
    471.            map.select(code, path);
    472.        }
    473.    }
    
    opened by blairjam 13
  • Problem with updating the label values

    Problem with updating the label values

    I display a world map and display the counter of my events per country using this:

    $('#vmap').vectorMap({
      map: 'world_en',
      backgroundColor: null,
      color: '#ffffff',
      hoverOpacity: 0.7,
      selectedColor: '#666666',
      enableZoom: true,
      showTooltip: true,
      values: sample_data,
      scaleColors: ['#C8EEFF', '#006491'],
      normalizeFunction: 'polynomial',
      onLabelShow: function (event, label, code) {
        if (sample_data[code] > 0)
          label.append(': ' + sample_data[code]);
      }
    });
    

    You see, I use onLabelShow to append a counter on the country label (if it is >0) So it displays something like this: Italy: 16 But, when I reload the map, the labels get a new value along with their old one: Italy: 16: 37 And it goes on adding the new counters on every reload!

    How can I reset the map?

    opened by chrisNom 11
  • States without stroke... Brazil map only

    States without stroke... Brazil map only

    The map of Brazil hasn't or almost hasn't a stroke/outline around states. I tried to add outline options but not worked! Are there any way to fix it?

    captura de tela 2016-05-09 as 11 18 16

    captura de tela 2016-05-09 as 11 18 28

    Bug Report Map File 
    opened by wesleymacente 11
  • new brazilian file

    new brazilian file

    New file for brazilian map, to add better stroke/outline in states borders. Related to issue #228 Also, the file was improved, reduced from +2mb to 145kb.

    Failed Pull Request Fixed 
    opened by elmeerr 10
  • Show Regions code by default

    Show Regions code by default

    Hi! first of all I want to congratulate you for this great job that you have done! It's a great project and I have a couple of questions that you probably could help me solving on implementing jqvmap:

    1. I need to show the region code for the US map by default, (not when mouseover), any idea of how to do it? The idea is to load the map and show each state code like CA, GA, NY, etc.. over each region..
    2. Also, I'm trying to get it work with a responsive design layout like Bootstrap, do you have any support for this? if yes have some example of how to do it?

    I appreciate all help and support that you can provide me.

    Thanks a lot!

    Feature Request Closed & Merged 
    opened by juliocastrop 10
  • Pins Positioned Incorrectly

    Pins Positioned Incorrectly

    Overview:

    When the container map is not positioned at 0,0, the pins are wrongly placed on the map. This also happens if there is content before the map on the page.

    Acceptance Criteria:

    Expected that pins to be centered on region

    Steps to Duplicate ( required for detects ):

    http://codepen.io/anon/pen/QEbWvQ Use any of the examples, move the map anywhere else on the screen either by adding content before it or making absolutely positioned.

    Relevant Documentation ( optional )

    http://codepen.io/anon/pen/QEbWvQ

    opened by senica 9
  • installable version for npm

    installable version for npm

    It would be nice to have an installable version as npm package without a grunt build task, because not everyone uses grunt. Also the latest version available over npm repository is a fork with version 1.0.1.

    Fixed 
    opened by t3easy 9
  • Is it possibile to make a selection of regions completely non interactive?

    Is it possibile to make a selection of regions completely non interactive?

    Hello, I need to create a map of Europe with only a few countries that are supposed to be interactive, while the rest of the continent has to be completely non interactive (no hover, no click, no disable of a selected region etc...). I played with onRegionSelect, onRegionClick and onRegionOver assigning preventDefault() to my array of non interactive country-codes, but this is not the way, I guess.

    Any suggestion?

    Fixed 
    opened by masiorama 9
  • Austria causes crash

    Austria causes crash

    New browsers support array function at(). This causes error when "at" is present as country code, but not present on map: jquery.vmap.min.js:10 Uncaught TypeError: this.countries[d].setFill is not a function or jquery.vmap.min.js:10 Uncaught TypeError: this.countries[code].setFill is not a function

    To fix, in unminified version replace if (this.countries[code]) { with if (this.countries.hasOwnProperty(code)) {

    opened by SimZal 0
  • Label Obstruct small states in USA map

    Label Obstruct small states in USA map

    I was wondering if it is not possible to place labels outside of states that are small, such that the states can be visible while the labels appear like legends. See https://simplemaps.com/us for example

    opened by StephenAdelakun 0
  • Distinguish the areas of northern India/Kashmir and Tibet

    Distinguish the areas of northern India/Kashmir and Tibet

    Hello,

    I have implemented your map here - https://s30098.p666.sites.pressdns.com/standard-land-rights/ https://s30098.p666.sites.pressdns.com/what-we-do/womens-land-rights/women-land-rights-visiting-professionals-program

    But here's my concern and hoping you can help me with it.

    Could we distinguish the areas of northern India/Kashmir and Tibet and keep them separate? Currently, these areas are not distinguished and also some parts of Kashmir in India has been moved and kept under China area. New Project

    opened by riteshkedia11 0
  • Destroy Map?

    Destroy Map?

    Issue #12 asked for the ability to destroy a map dynamically and was marked "won't fix".

    But your map creates a jQuery(window).resize event listener every time the map is switched and it can't be removed without removing all query resize event listeners. https://github.com/10bestdesign/jqvmap/blob/master/src/JQVMap.js#L31

    I'm using your map (thank you!) to allow users to switch between maps by clicking on some buttons on my page, and things start to slow down to a crawl after switching the map a few times.

    As far as I can tell that resize event listener is the only thing that isn't getting properly destroyed when you replace the map container so it'd be really nice to either make that anonymous function call a named function so we can stop it or to have an actual destroy function that just cleans everything up.

    opened by DaveZMB 0
  • fix color mapping logic

    fix color mapping logic

    What does this PR do ?

    This PR fixes how to get color codes.

    How should this be tested ?

    N/A

    What are the relevant issues ?

    N/A

    This Pull Request includes:

    • [ ] Bug Fix with passing npm test
    • [ ] New Feature with passing npm test
    • [ ] Code Improvement with passing npm test
    • [x] Updated Documentation
    • [ ] New Map File & Example HTML

    What gif best describes how you feel about this work ?

    https://media.giphy.com/media/DHqth0hVQoIzS/giphy.gif

    opened by kei500 0
Releases(v1.5.1)
  • v1.5.1(May 18, 2016)

    Released on May 17th, 2016

    1. Added a minified css file
    2. Removed Post Install Script
    3. Updated README.md
    4. Added Turkey Map and Example File
    5. Moved Github files into .github folder
    Source code(tar.gz)
    Source code(zip)
  • v1.5.0(Mar 16, 2016)

    Released on March 15th, 2016

    1. Updated LICENSE path in packaged dist files
    2. Fixed bugs in labels and pins where mouse events were not passing through to clickable region
    3. Removed -merc suffix from map files created by map creator ( fixes #204 )
    4. Added new example for custom placement of pins ./examples/pins_custom.html
    5. Fixed onRegionSelect issue not returning region ( fixes #201 )
    6. Added better support to make regions disabled ( see #197 and new ./examples/inactive_regions.html )
    Source code(tar.gz)
    Source code(zip)
  • v1.4.0(Dec 7, 2015)

    Released on December 6th, 2015

    1. Added Touch Support for Mobile Devices
    2. Added showLabels config option to place ISO codes by default
    3. Added onResize event handler and fixed resize event binding issues
    4. Fixed issue when dragging a map and releasing outside map
    5. Added onLoad event handler
    6. Updated README.md & CONTRIBUTING.md files
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Dec 7, 2015)

  • v1.3.0(Dec 7, 2015)

    Released on December 4th, 2015

    IMPORTANT: This is a backwards breaking change. You will need to use the new map files with this version of JQVMap. Our focus was to make any file you create here compatible with the other vector map libraries as well as allow theirs to work with ours. Everybody wins ... except our old map files.

    1. Added ./create folder for users wishing to create custom maps. Folder has detailed writeup on how to create your own maps.
    2. Added Unit Tests to ./tests folder and added them as part of of the npm test suite and build process. These tests can also be run in the browser.
    3. Renamed WorldMap to JQVMap as "WorldMap" did not really make sense as a variable name
    4. Removed case sensitivity for reference regions by code.
    5. Fixed incorrect license header in distributed files
    6. Updated README.md & CONTRIBUTING.md files
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Dec 7, 2015)

    Released on November 18th, 2015

    1. Switched to using Grunt to build source code. JS files in ./dist are now generated from ./src folder.
    2. Moved source files to ./src folder
    3. Renamed ./samples to ./examples
    4. Renamed ./jqvmap to ./dist
    5. Removed ./website folder as it is not really needed in this project
    6. Updated README.md & CONTRIBUTING.md files
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Dec 7, 2015)

    Released on October 17th, 2015

    1. Added new maps for Russia, France, Germany, Algeria, Iraq, Iran & Brazil
    2. Fixed regionClickEvent bug
    3. Added event handling for deselecting a region
    4. Added Touch Event code example
    5. Added sample HTML pages for each map.
    Source code(tar.gz)
    Source code(zip)
Owner
10 Best Design
10 Best Design ranks the top web design companies in the world. We use an algorithm to sort through the best firms and provide users with an easy to search list
10 Best Design
Serverless raster and vector map tile generation using Mapnik and AWS Lambda

tilegarden ??️ ?? Contents About Usage Deployment to AWS Additional Configuration Options Required AWS Permissions Features Configuration Selection an

Azavea 89 Dec 22, 2022
This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and "Leaflet.js" for the map.

ISS-tracking-map About This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and

Waz.sheeran 2 Oct 25, 2021
Implements the tilelive API for generating vector tiles from PostGIS

tilelive-postgis Implements the tilelive API for generating mapnik vector tiles from PostGIS. Installation npm install @mapbox/tilelive tilelive-postg

Stepan Kuzmin 50 Dec 12, 2022
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specif

Mapbox 9.4k Jan 7, 2023
A Node.js map tile library for PostGIS and torque.js, with CartoCSS styling

Windshaft A Node.js map tile library for PostGIS and torque.js, with CartoCSS styling. Can render arbitrary SQL queries Generates image and UTFGrid in

CARTO 306 Dec 22, 2022
A library that makes Image Map Area responsive

A library that makes Image Map Area responsive

elenh 1 Jan 21, 2022
JavaScript WebGL 3D map rendering engine

VTS Browser JS is a powerful JavaScript 3D map rendering engine with a very small footprint (about 163 kB of gziped JS code). It provides almost all f

Melown Technologies, SE 203 Dec 7, 2022
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
Add time dimension capabilities on a Leaflet map.

Leaflet TimeDimension Add time dimension capabilities on a Leaflet map. Examples and basic usage API L.Map L.TimeDimension L.TimeDimension.Layer L.Tim

SOCIB public code 379 Dec 23, 2022
Lightweight Node.js isochrone map server

Galton Lightweight Node.js isochrone server. Build isochrones using OSRM, Turf and concaveman. Francis Galton is the author of the first known isochro

Urbica 266 Dec 17, 2022
A pluggable Node.js map tile server.

TileStrata TileStrata is a pluggable "slippy map" tile server that emphasizes code-as-configuration. The primary goal is painless extendability. It's

Natural Atlas 409 Dec 30, 2022
A map tool with real-time collaboration 🗺️

Mapus Maps with real-time collaboration ??️ Mapus is a tool to explore and annotate collaboratively on a map. You can draw, add markers, lines, areas,

Alyssa X 3k Jan 4, 2023
3D web map rendering engine written in TypeScript using three.js

3D web map rendering engine written in TypeScript using three.js

HERE Technologies 1.2k Dec 30, 2022
Mind elixir is a free open source mind map core.

Mind-elixir is a framework agnostic mind map core

DJJo 1.4k Jan 2, 2023
Fast Map built for keys that are always fixed size uniformly distributed buffers.

turbo-hash-map Fast Map built for keys that are always fixed size uniformly distributed buffers. npm install turbo-hash-map Uses a prefix trie to map

Mathias Buus 39 Jun 20, 2022
Greasemonkey script to allow marking items on the interactive map of Elden Ring as completed.

Greasemonkey script (or Tampermonkey) to allow marking items on the interactive map of Elden Ring as completed. The interactive map is a Fextralife-project, all credits for the map go to them.

Daniel Tischner 6 Jun 19, 2022
Interactive map overlay for finding secrets hidden around the world of Lost Ark.

Lostark Map Overlay This is an interactive map overlay which is resizable, movable and can be kept up during gameplay for finding secrets hidden aroun

Omar Minaya 6 Dec 29, 2022
:ukraine: A self-hosted app for keeping track of employee wellbeing and dislocation during the Russo-Ukrainian war, with an interactive map.

Helping organizations stay together and help their members in times of disaster On February 24th, 2022, the lives of the entire Ukrainian nation were

MacPaw Inc. 111 Dec 15, 2022
Generates an embeddable map that displays business info from an OSM object id.

# OSM Business Card Generates an embeddable map that displays business info from an OSM object id. Loads object type (n/w/r) and id from url parameter

Will Bennett 6 May 26, 2022