npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

s2maps-gl-react

v1.1.16

Published

A react ready module for the s2maps-gl engine.

Downloads

6

Readme

s2maps-gl-react npm downloads JavaScript Style Guide bundle tree-shake

About

Clone Package

# grab the package
git clone https://github.com/S2-Maps/s2maps-gl-react.git
# remove the origin
git remote rm origin
# download the dependencies
npm i / yarn / pnpm i

Example use

import React from 'react'
import { Map } from 's2maps-gl-react'
import style from './style.json'

const apiKey = '<insert_api_key>'

export default function App () {
  return (
    <div className='App'>
      <Map style={style} apiKey={apiKey} options={{ dark: true }} />
    </div>
  )
}

Props

style [string | Object]

  • hyperlink to a style object or JSON object describing what to draw and where to pull the data from

opts [MapOptions]

export type MapOptions = {
  interactive?: boolean, // allow the end user to interact with the canvas
  apiKey: string,
  style: Object | string, // style object
  scrollZoom?: boolean, // allows user control over the zoom
  canvasMultiplier?: number, // defaults to window.devicePixelRatio
  attributions?: { [string]: string }, //  [name]: href
  attributionOff?: boolean, // hides the attribution symbol. If using s2maps.io data you MUST NOT turn this off.
  infoLayers?: Array<string>,
  zoomController?: boolean,
  compassController?: boolean,
  colorBlindController?: boolean,
  canZoom?: boolean,
  canMove?: boolean,
  darkMode?: boolean
}

apiKey [string]

  • If using s2maps.io data, an API key is required to access.

ready [Function]

  • Once the engine is ready to take inputs, it will fire this function

click [Function] (map.dispatchEvent)

  • Everytime a click is dispatched from the map engine, this function will be called

info [Function] (map.dispatchEvent)

  • Everytime a info is dispatched from the map engine, this function will be called

mouseenter [Function] (map.dispatchEvent)

  • Everytime a mouseenter is dispatched from the map engine, this function will be called

mouseleave [Function] (map.dispatchEvent)

  • Everytime a mouseleave is dispatched from the map engine, this function will be called

License

Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0)

Copyright 2021 - S2MAPS INC

You are free to: - Share: copy and redistribute the material in any medium or format

Under the following terms: - Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use. - NonCommercial: You may not use the material for commercial purposes. - NoDerivatives: If you remix, transform, or build upon the material, you may not distribute the modified material. - No additional restrictions: You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.

Notices: - You do not have to comply with the license for elements of the material in the public domain or where your use is permitted by an applicable exception or limitation. - No warranties are given. The license may not give you all of the permissions necessary for your intended use. For example, other rights such as publicity, privacy, or moral rights may limit how you use the material.


contains code from s2maps-gl

Copyright 2021 - S2MAPS INC

All rights reserved.

s2maps-gl must be used according to the S2 Maps Terms of Service. This license allows developers with a current active S2 Maps account to use and modify the S2 Maps Web SDK. Developers may modify the S2 Maps Web SDK code so long as the modifications do not change or interfere with marked portions of the code related to billing, accounting, and anonymized data collection. The S2 Maps Web SDK only sends anonymized usage data, which S2 Maps uses for fixing bugs and errors, accounting, and generating aggregated anonymized statistics. This license terminates automatically if a user no longer has an active S2 Maps account.

For the full license terms, please see the S2 Maps Terms of Service at https://www.s2maps.io/tos/.