🛠️
Wazimap technical handbook
  • Introduction
  • System Architecture
    • Database Models
    • IndicatorData
    • Geography Hierarchies
    • Choropleth Maps
    • Determine which instance to use
  • Development
    • Code Deployment
    • Component Architecture
    • Development Process
    • Pull Request Template Explanation
    • Code Review Process
    • Pull Request Template (FE)
    • Webflow Integration
    • Merging webflow exports
    • Rules for Webflow exports
    • Webflow exports & changelog
      • June 2023
      • March 2023
      • February 2023
      • December 2022
      • November 2022
      • October 2022
      • May 2022
      • April 2022
      • March 2022
      • January 2022
      • December 2021
      • November 2021
      • October 2021
    • Translation
    • Map components
  • Testing
    • Testing guidelines
    • Critical Paths
    • GUI Tests
    • Heroku Review Apps
  • Design
    • Iconography
  • Change Proposals
  • NGPx - Template
  • NGP1 - Changing the data model (Implemented)
  • NGP2 - Presenting Geographical Hierarchies to users
  • NGP3 - Change Geography Hierarchies
  • NGP4 - Format configuration
  • NGP5 - Multiple count columns
  • NGP6 - Profile-specific open graph metadata
  • NGP7 - Wazimap profile domain management
  • NGP8 - Replacing Webflow as frontend framework
  • Tutorials
    • Creating a new profile
    • Loading new geographies
    • Loading Data
    • Creating a new admin user
    • Creating a non-admin user for a private profile
    • Changing the Geography level name
    • Deployment to Dokku
  • Configuration
  • Profile Configuration
  • Profile Indicator Configuration
  • Profile Collection Configuration
  • Geographies, hierarchies and versions
  • API
    • General API Information
    • Upload API
    • Task Status
    • Point data API
Powered by GitBook
On this page
  • Location pins
  • Google style pin
  • White pin

Was this helpful?

Export as PDF
  1. Development

Map components

PreviousTranslationNextTesting guidelines

Last updated 3 years ago

Was this helpful?

Location pins

Google style pin

This marker is based on the look of the google pin style and is able to accommodate icons and text abbreviations easily.

Dimensions:

At all zoom levels, this pin should be 21px wide.

Usage:

  • Only adjust the colour of the element with the specified colour (#4693EF)

  • The stroke around the edge is defined as 8% black and does not need to be changed

  • Text abbreviations within the marker should be 8.5px

White pin

This marker is based on the look of the google pin style and is able to accommodate icons and text abbreviations easily.

Dimensions:

At all zoom levels, this pin should be 21px wide.

Usage:

  • Only adjust the colour of the element with the specified colour (#4693EF)

  • Text abbreviations within the marker should be 8px

867B
white-marker.svg
image
White Marker
1KB
google-style-marker.svg
image
Google Style Marker