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

@smartmaps/maps

v5.2.3

Published

GDPR-compliant javascript map library developed by YellowMap AG

Downloads

26

Readme

SmartMaps

SmartMaps is a GDPR-compliant map platform developed by YellowMap AG. The focus of the platform is the digital sovereignty of users. Based on OpenStreetMap data, SmartMaps offers individually customizable functions such as maps, geocoding, autocomplete or routing for the visualization of points of interest, internal location analyses or address validations. SmartMaps is certified with the seals 'Software Hosted in Germany' and 'fair.digital'. These confirm a GDPR-compliant, transparent and data-saving handling of personal information.

To get started with SmartMaps, register for free at SmartMaps

For more information visit our Examples or Documentation

Install

npm install --save-dev @smartmaps/maps

Use it with:

  • Pass the map instance the HTML element or the CSS selector where you want the map to be displayed, your API key and the center with the desired zoom level as initial values
import { map } from "@smartmaps/map"

const map = map(elementOrCssSelector, "INSERT-YOUR-API-KEY-HERE", {
          center: [49.021273, 8.439316],
          zoom: 14,
})
  • Put a div element with a certain id where you want your map to be (elementOrCssSelector is 'map' in this case):
<div id="map"></div>
  • Make sure the map container has a defined height, for example by setting it in CSS:
#map { height: 600px; }

Import the styles from node_modules/@smartmaps/maps/dist/smartmaps-maps.css. This will depend on your build process. If you don't use a builder like Webpack or Rollup you may copy the file from the node_modules in a folder which is hosted in your app and load it via html script tag.

<link rel="stylesheet" href="YourAssetsFolder/smartmaps-maps.css">

Features

Maps (@smartmaps/maps)

Maps is the globally usable map base for your industry-specific requirements. Whether you want to visualize location data, business data or socio-demographic data on the web, internal applications or an app.

Autocomplete (@smartmaps/autocomplete)

A few letters are enough to inspire your customers. With the Autocomplete function, suitable suggestions are already recommended when the first letters are entered in the address search. Autocomplete is easily customizable through parameters like local boosting.

Geocoding (@smartmaps/geocoding)

With the help of geocoding, you convert postal addresses into coordinates and visualize them on the map with pinpoint accuracy. Reverse geocoding allows you to convert an existing coordinate from an automatic location into an address in the opposite way.

Routing (@smartmaps/routing)

Show your customer the way to your location and navigate him safely to the desired destination - whether on foot, by bike or by car. Use the routing API not only for classic A-B routing, but also for matrix routing, the calculation of isochrones, trip planning or map match.