https://github.com/jdlubrano/datamaps-zoomto-plugin

A Datamaps plugin to zoom to coordinates on a Datamaps svg.
https://github.com/jdlubrano/datamaps-zoomto-plugin

Last synced: 23 days ago
JSON representation

A Datamaps plugin to zoom to coordinates on a Datamaps svg.

• Host: GitHub
• URL: https://github.com/jdlubrano/datamaps-zoomto-plugin
• Owner: jdlubrano
• License: mit
• Created: 2015-10-30T18:38:12.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-01-04T20:52:27.000Z (about 6 years ago)
• Last Synced: 2024-12-17T19:47:15.525Z (24 days ago)
• Language: JavaScript
• Size: 399 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Datamaps Zoom-to Plugin

[![Build Status](https://travis-ci.org/jdlubrano/datamaps-zoomto-plugin.svg?branch=master)](https://travis-ci.org/jdlubrano/datamaps-zoomto-plugin)

## Contributors

* Joel Lubrano

## Description

This project provides a plugin for zooming to arbitrary coordinates

on a D3/[Datamaps](datamaps.github.io) svg.

## Getting Started

### Git

Clone the project via `git`.  Dependencies can be installed with `yarn install`,

and running `grunt` will build the source code.  The original and minified

versions will be present in the `build` directory.

### Yarn

Run `yarn install datamaps-zoomto`.  The source will then be located in

`node_modules/datamaps-zoomto/build`.

## Sample Usage

```javascript

// Create a Datamap instance

var dm = new Datamap({

    element: document.getElementById('map')

});

// Setup the options for the zoom (defaults given)

var zoomOpts = {

    scaleFactor: 1, // The amount to zoom

    center: {

        lat: , // latitude of the point to which you wish to zoom

        lng: , // longitude of the point to which you wish to zoom

        // NOTE: You cannot specify lat without lng or lng without lat.  It's all or nothing.

    },

    transition: {

        duration: 1000 // milliseconds

    },

    onZoomComplete: function (zoomData) {

      // Called after zoomto completes.  Bound to the Datamaps instance.

      // Passes one argument, zoomData.

      // zoomData = {

      //   translate: { x: , y:  },

      //   scale: 

      // }

      // no-op by default

    }

};

// perform the zoom

dm.zoomto(zoomOpts);

// Of course, using the default zoom will not actually zoom due to a 1:1 scale

// and the center of the map not changing.

```

Also see `examples/basic.html`.

### Using with Webpack

It is also pretty easy to use this plugin in a Webpack bundle.  See

the `webpack-example` directory for details.

```javascript

const Datamaps = require('datamaps');

require('datamaps-zoomto');

var dm = new Datamaps({

  element: document.getElementById('map')

});

dm.zoomto({

  scaleFactor: 2,

  transition: {

    duration: 1000

  }

});

// or using ES6 import syntax

import Datamaps from 'datamaps';

import zoomto from 'datamaps-zoomto';

var dm = new Datamaps({

  element: document.getElementById('map')

});

dm.addPlugin('zoomto', zoomto);

dm.zoomto({

  scaleFactor: 2,

  transition: {

    duration: 1000

  }

});

```

## Dependencies

See `package.json`.