Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 72 views

    Mapping API's: Leaflet - Awesome Markers Plugin Using Font Awesome

    Uploaded by

    Gabriela Albuquerque Lucio da Silva
    This document discusses how to use the Leaflet.awesome-markers plugin to add Font Awesome icons to markers on a Leaflet map. It provides instructions on downloading and linking the plugin CSS and JS files, selecting icons from the Font Awesome library, and modifying the code to display markers with icons instead of images. The plugin allows using iconic markers from libraries like Font Awesome, Bootstrap Glyphicons, or IonIcons as an alternative to custom image markers.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Mapping API's: Leaflet - Awesome Markers Plugin Using Font Awesome

    Uploaded by

    Gabriela Albuquerque Lucio da Silva
    72 views2 pages
    This document discusses how to use the Leaflet.awesome-markers plugin to add Font Awesome icons to markers on a Leaflet map. It provides instructions on downloading and linking the plugin CSS and JS files, selecting icons from the Font Awesome library, and modifying the code to display markers with icons instead of images. The plugin allows using iconic markers from libraries like Font Awesome, Bootstrap Glyphicons, or IonIcons as an alternative to custom image markers.

    Original Title

    PM2082-17O

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document discusses how to use the Leaflet.awesome-markers plugin to add Font Awesome icons to markers on a Leaflet map. It provides instructions on downloading and linking the plugin CSS and JS files, selecting icons from the Font Awesome library, and modifying the code to display markers with icons instead of images. The plugin allows using iconic markers from libraries like Font Awesome, Bootstrap Glyphicons, or IonIcons as an alternative to custom image markers.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    72 views2 pages

    Mapping API's: Leaflet - Awesome Markers Plugin Using Font Awesome

    Uploaded by

    Gabriela Albuquerque Lucio da Silva
    This document discusses how to use the Leaflet.awesome-markers plugin to add Font Awesome icons to markers on a Leaflet map. It provides instructions on downloading and linking the plugin CSS and JS files, selecting icons from the Font Awesome library, and modifying the code to display markers with icons instead of images. The plugin allows using iconic markers from libraries like Font Awesome, Bootstrap Glyphicons, or IonIcons as an alternative to custom image markers.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 2

    Mapping API’s: Leaflet - Awesome Markers Plugin Using Font Awesome

    Welcome to the Essential ArcGIS Task Sheet Series. This series supplements the Iowa State University Geospatial
    Technology Training Program short course series. The task sheets are designed to provide quick, easy instructions for
    performing mapping tasks.

    The Leaflet.awesome-markers plugin (http://github.com/lvoogdt/Leaflet.awesome-markers) allows users to utilize the


    Glyphicons / IonIcons / Font-Awesome icons to “create colorful iconic and retina-proof markers” for Leaflet and acts as
    an alternative to creating custom image markers. This task sheet is the first of three, with other task sheets in Bootstrap
    and IonIcons. These all build upon the previous task sheets: Mapping API’s: Leaflet - Getting Started PM2082-14r,
    Mapping API’s: Leaflet - Adding Markers PM20282-14s, and Mapping API’s: Leaflet - Custom Image Markers PM2082-15e.
    Please refer to those documents for the initial Leaflet map setup.

    1. Leaflet - Aweome Markers Setup


    a. Download and save the file customMarkersLeaflet.
    html from https://github.com/ISUEOGTP/GISTaskSheets
    and save it in your project directory. Rename the file
    awesomeMarkersLeaflet.html.

    b. Download the Awesome Markers plugin from GitHub


    (https://github.com/lvoogdt/Leaflet.awesome-markers)
    and extract it to your server or local project directory.
    In this directory, you will find a directory named “dist.”
    Within this directory are the files leaflet.awesome-
    markers.css and leaflet.awesome-markers.min.js (or
    leaflet.awesome-markers.js) that you will be using.

    c. In the new awesomeMarkersLeaflet.html file, under


    the leaflet.css stylesheet link, add a link to the leaflet.
    awesome-markers.css file.

    d. Under the leaflet.js <script> link add a new link to the


    leaflet.awesome-markers.min.js file.

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />

    <link rel="stylesheet" href="leaflet-awesome-markers/dist/leaflet.awesome-markers.css" />

    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>

    <script src="leaflet-awesome-markers/dist/leaflet.awesome-markers.min.js"></script>

    2. Select and Install Icons


    a. Add a link to the font-awesome CSS file before the
    Leaflet CSS fie in the <Head>. Note: You can use more
    than one library at a time.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-


    awesome.min.css" />
    3. Adding Markers
    a. This tutorial will build off the code created for Mapping
    API’s: Leaflet - Custom Image Markers and will modify the
    code accordingly based on the icon selected. The code
    defining the greenIcon can be kept or deleted. It will
    not be used once the marker is changed to the new style.

    b. Go to http://fontawesome.io/icons/ to explore the Font


    Awesome library. Decide on the icon you want to use
    and make note of its name. In the example to the
    right, the spinner icon is used and can be found in
    the library under Web Application Icons.
    var marker1 = L.marker([43, -93], {
    c. Modify the existing marker1 variable as it appears icon: L.AwesomeMarkers.icon({
    to the right. Note that the icon in this example is icon: 'spinner',
    prefix: 'fa',
    spinner and the prefix is fa. The prefix can be found
    markerColor: 'green',
    in the library by clicking on the icon. The title is part spin:true
    of the L.marker class and can be optionally included }),
    following the icon attributes. title: "highlight title",
    }).addTo(map);
    d. The markerColors are limited to 'red', 'darkred',
    'orange', 'green', 'darkgreen', 'blue', 'purple',
    'darkpurple', 'cadetblue'. See note at the end ot this task
    sheet for more color options.

    e. The color of the selected icon can be added by including


    the iconColor property and setting the color as 'white',
    'black', or css code (hex, rgba, etc.)

    f. Additional classes can be added via the extraClasses


    property.

    g. Look at Mapping API’s: Leaflet - Awesome Markers Using


    Bootstrap to utilize Bootstrap Glyphs or Mapping API’s:
    Leaflet - Awesome Markers Plugin Using IonIcons to utilize
    IonIcons.

    Note: The Leaflet.awesome-markers used in this task sheet were


    developed by Lennard Voogdt. A forked version of this repository
    that adds additional colors ('white', 'lightred', 'beige', 'lightgreen',
    'darkblue', 'lightblue', 'pink', 'gray', 'lightgray', 'black') and
    an option for square markers (className: 'awesome-marker
    awesome-marker-square') are available from https://github.
    com/sigma-geosistemas/Leaflet.awesome-markers.

    Contact:
    Bailey Hanson bahanson@iastate.edu, 515-520-1436 or Professor Christopher J. Seeger, ASLA, GISP cjseeger@iastate.edu,
    515-509-0651 for more information about the Geospatial Technology Program. This task sheet and more are available at
    www.extension.iastate.edu/communities/gis

    Iowa State University Extension and Outreach does not discriminate on the basis of age, disability, ethnicity, gender identity, genetic information, marital status,
    national origin, pregnancy, race, religion, sex, sexual orientation, socioeconomic status, or status as a U.S. veteran. (Not all prohibited bases apply to all programs.)
    Inquiries regarding non-discrimination policies may be directed to Ross Wilburn, Diversity Officer, 2150 Beardshear Hall, 515 Morrill Road, Ames, Iowa 50011, 515-
    294-1482, wilburn@iastate.edu.

    August 2017 PM2082-17o

    You might also like