Giter VIP home page Giter VIP logo

share-widget's Introduction

share-widget

Share widget built for version 4.x of the ArcGIS API for Javascript

share-widgetโ€‹

Features:

  1. MapView and SceneView compatability
  2. Share map via URL
  3. Embed map with Iframe code
  4. Share item services, i.e. social media or e-mail
  5. Client-side projection for non-Web Mercator/non-WGS84 spatial references
  6. Customizable Share Items
    • Default items: Facebook, Twitter, LinkedIn, and Email
  7. Customizable Share Features (All features toggled on by default):
    • Copy URL to clipboard
    • Share Services, i.e. Social Media or Email
    • Shorten URL
    • Embed Map

Note: Share Widget uses Esri's Calcite CSS Styles.

Calcite Web Documentation: https://esri.github.io/calcite-web/documentation/

ShareWidget

Constructor:

new ShareWidget(properties?)

Property Overview:
Name Type Summary
iconClass String The widget's default CSS icon class.
label String The widget's default label.
shareFeatures ShareFeatures A reference to ShareFeatures.
shareItems Collection<ShareItem> Collection of ShareItem class.
shareModalOpened Boolean Property to toggle share modal
shareUrl String Share URL of web application. Read-only
viewModel ShareViewModel The view model for this widget.
view MapView | SceneView A reference to the MapView or SceneView

ShareItem

Constructor:

new ShareItem(properties?)

Property Overview:
Name Type Summary
className String Class name of share item icon.
id String Unique ID of share item service i.e. facebook, twitter, linkedin, email, etc.
name String Name of Share Item.
urlTemplate String URL template of share item. Consists of share service URL along with URL parameters i.e "https://pinterest.com/pin/create/bookmarklet?&url={url}"

ShareFeatures

Constructor:

new ShareFeatures(properties?)

Property Overview:
Name Type Summary
copyToClipboard Boolean Toggles copy share URL to clipboard feature.
embedMap Boolean Toggles embed map feature.
shareServices Boolean Toggles share item services feature.
shortenLink Boolean Toggles shorten URL feature.

Please note: Both copyToClipboard and shareServices properties cannot be toggled off concurrently.

ShareViewModel

Constructor:

new ShareViewModel(properties?)

Property Overview:
Name Type Summary
embedCode String IFrame Embed Code Read-only.
shareFeatures ShareFeatures A reference to ShareFeatures.
shareItems Collection<ShareItem> Collection of ShareItem class.
shareModalOpened Boolean Property to toggle share modal
shareUrl String Share URL of web application. Read-only
state String Current state of the widget.
view MapView | SceneView A reference to the MapView or SceneView

Examples:

Default:
const share = new ShareWidget({
    view,
    container: document.createElement("div")
});
Custom:
  const PINTEREST_ITEM = new ShareItem({
    id: "pinterest",
    name: "pinterest",
    className: "icon-social-pinterest",
    urlTemplate:
      "https://pinterest.com/pin/create/bookmarklet?&url={url}"
  });
  const REDDIT_ITEM = new ShareItem({
    id: "reddit",
    name: "Reddit",
    className: "icon-social-share",
    urlTemplate: "https://reddit.com/submit?url={url}"
  });
  const LINKED_IN = new ShareItem({
    id: "linkedin",
    name: "LinkedIn",
    className: "icon-social-linkedin",
    urlTemplate: "https://linkedin.com/shareArticle?url={url}"
  });

  const shareFeatures = new ShareFeatures({
    copyToClipboard: false,
    embedMap: false
  });
  const ShareItemCollection = Collection.ofType<ShareItem>(ShareItem);
  const shareItems = new ShareItemCollection([
    PINTEREST_ITEM,
    REDDIT_ITEM,
    LINKED_IN
  ]);
  const share = new ShareWidget({
    view,
    shareFeatures,
    shareItems
  });

Resources

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

Esri welcomes contributions from anyone and everyone. Please see our guidelines for contributing.

Licensing

Copyright 2018 Esri

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's LICENSE file.

share-widget's People

Contributors

rslibed avatar kellyhutchins avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.