David Shaw

Creating Image Maps in React Native

2018-05-18T19:48:00-04:00

Image maps were very popular in mid-90s web design. Now, we’ll be able to do this in a React Native mobile app. All we need is some z-index and SVG magic! We’ll create our application in Expo for ease of setup and testing.

Step 1 - Get an Expo account Sign up here: https://snack.expo.io/

If you’re not using Expo, everything’s about the same, but your program layout may be a little different.

Step 2 - Introduce dependencies Dimensions to make sure the graphics work with whatever screen size SVG to create the image map layer

import { Alert, Dimensions, Image, StyleSheet, View } from 'react-native';
import { Constants, Svg } from 'expo';

Let’s also clear up any dummy data in the project. We can get rid of the Text dependency from ‘react-native’. And we can comment out or remove the Card and AssetExample dependencies. Your final dependency list should look like:

import React, { Component } from 'react';
import { Alert, Dimensions, Image, StyleSheet, View } from 'react-native';
import { Constants, Svg } from 'expo';

Let’s also clear the render function to only have the View object and our Image object:

<View style={styles.container}>
        <Image
         source= 
        />
</View>

We need to make the image work with the screen size, so let’s first add a simple image style to the styles variable:

image: {
    position: 'absolute',
    top: 130,
    bottom: 0,
    left: 20,
    right: 0,
    resizeMode: 'stretch',
}

The image should show now, but it might not look good. We’ll use the Dimensions library to make the object display based on the image dimensions.

We’ll use the Dimensions library to setup width and height variables:

const { width, height } = Dimensions.get("window");

We’ll also add width and height as state variables in case the user changes device orientation (or something else strange happens). We’ll add this in a constructor in our App component.

constructor(props) {
    super(props);
    
    this.state = { 
      width: 0,
      height: 0,
    }
}

We’ll also add some additional logic to deal with scaling the image based on orientation, etc. We’ll add viewWidth, viewHeight and scale. We’ll also create a function called imageDimensions which will handle this calculation for us. We’ll use this with the SVG as well.

constructor(props) {
    super(props);
    
    this.state = { 
      width: 0,
      height: 0,
      viewWidth: width,
      viewHeight: height,
      scale: 1,
    }
  }

imageDimensions() {

    const viewWidth = this.state.viewWidth;
    const viewHeight = this.state.viewHeight;

    if (viewWidth < viewHeight) { // base off of width
      
      const newWidth = viewWidth - 40;
      const newHeight = ((origHeight * newWidth) / origWidth);
      const newScale = newWidth / origWidth;

      this.setState({ 
        width: newWidth,
        height: newHeight,
        scale: newScale
      });
    } else {
      
      const newHeight = viewHeight - 40;
      const newWidth = ((origWidth * newHeight) / origHeight);
      const newScale = newHeight / origHeight;
      
      this.setState({
        width: newWidth,
        height: newHeight,
        scale: newScale
      });
    }

}

We should have an image that fits within the bounds of the program now.

Step 3 - Setup SVG graphic We basically want to create an SVG layer of image map paths. You can do this in a vector graphic tool or on a few websites. I personally like Easy Image Map Generator.

When we’re done, we should have a list of SVG paths to coordinate with the image map regions.

Step 4 - Add the SVG graphic to the program Now you can import the SVG paths to React Native. We’ll create the SVG object, and add each path group as a Polygon object.

Let’s define the Polygon object first at the top:

const { Polygon } = Svg;

We’ll also add a style for the svg svg: { opacity: 0.2, },

Now, let’s add the paths to the project.

<Svg
  height={this.state.height}
  width={this.state.width}
  style={[styles.svg]}>
  <Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="1"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 1')}
    styles=
	points="424,100,430,84,434,65,439,48,454,47,466,74,474,78,475,85,485,85,481,93,444,131,443,141,435,136" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="2"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 2')}
	points="421,102,431,139,438,143,435,149,415,156,415,127,421,119" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="3"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 3')}
	points="404,162,434,157,440,150,440,162,450,173,457,168,444,176,438,165,404,174" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="4"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 4')}
	points="335,191,348,184,354,183,356,171,378,150,384,136,397,144,403,131,416,109,412,127,411,156,399,158,398,177,405,180,403,193,404,205,430,195,406,211,401,198,383,189,375,179" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="5"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 5')}
	points="431,171,437,170,441,180,460,177,434,184" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="6"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 6')}
	points="409,178,427,174,428,185,408,198" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="7"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 7')}
	points="334,196,371,189,380,197,377,214,385,224,377,232,321,245,323,230,320,224" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="8"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 8')}
	points="388,198,400,204,400,215,403,224,396,247,383,240,394,222,384,212" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="9"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 9')}
	points="379,238,386,259,393,258" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="10"
	scale={this.state.scale}
	onPressIn={()=>Alert.alert('Region 10')}
	points="318,250,312,276,322,272,334,258,338,249,351,250,361,261,370,272,373,244,377,266,386,281,396,268,394,263,383,262,373,239" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="11"
	scale={this.state.scale}
	onPressIn={()=> Alert.alert('Region 11')}
	points="348,254,360,269,376,280,387,300,305,320,313,299,318,276,328,273,340,254" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="12"
	scale={this.state.scale}
	onPressIn={()=> Alert.alert('Region 12')}
	points="303,323,389,307,399,319,386,335,387,345,354,370,314,356,296,352,270,360" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="13"
	scale={this.state.scale}
	onPressIn={()=> Alert.alert('Region 13')}
	points="270,364,295,356,316,362,348,371,345,388,319,418" />
<Polygon 
	stroke="purple"
	fill="lime" 
	strokeWidth="1"
	region="14"
	scale={this.state.scale}
	onPressIn={()=> Alert.alert('Region 14')}
	points="264,367,248,401,271,433,302,452,312,449,318,426" />
</Svg>

You should see the SVG graphic on the screen now. It has the correct size, but it’s not aligned with the image. We could manually do this, but we can have align our image to the centered SVG graphic.

First we’ll make a function to measure the SVG position:

measureSvg(event) {
    this.setState({
      svgx: event.nativeEvent.layout.x,
      svgy: event.nativeEvent.layout.y
    })
  }
	```

Then we’ll connect the function to our SVG component. It will be called onLayout, so it will work if the device orientation changes. 

<Svg . onLayout={(event) => this.measureSvg(event)}

Finally, we’ll add a top and left setting to our Image component to have the coordinates be in-sync with the SVG

<Image source= style={[styles.image, {width: this.state.width, height: this.state.height, left: this.state.svgx, top: this.state.svgy}]} /> ```

This uses event.reactNative.layout, which can be found here:

https://facebook.github.io/react-native/docs/view.html

Step 6 - Make the SVG layer invisible

We can now set the SVG layer opacity to 0. This will make the layer invisible, but still functional. You can tap around to see the alert message in action. You can set onPressIn to any function you want.

That’s it! Hope it helps you in your React Native efforts.

Markdown Extra Components

2016-02-24T22:48:00-05:00

Summary:

You can pick as item to see how to apply in markdown.

External Elements

Gist
Codepen
Slideshare
Videos

Evidence

You can try the evidence!

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

<span class="evidence">Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.</span>

Side-by-side

Like the Medium component.

Image on the left and Text on the right:

<div class="side-by-side">
    <div class="toleft">
        <img class="image" src="http://davidshaw.io/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>

    <div class="toright">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Photo by John Doe

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text on the left and Image on the right:

<div class="side-by-side">
    <div class="toleft">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <div class="toright">
        <img class="image" src="http://davidshaw.io/assets/images/profile.jpg" alt="Alt Text">
        <figcaption class="caption">Photo by John Doe</figcaption>
    </div>
</div>

Photo by John Doe

Star

You can give evidence to a post. Just add the tag to the markdown file.

star: true

Especial Breaker

You can add a especial hr to your text.

<div class="breaker"></div>

Spoiler

You can add an especial hidden content that appears on hover.

<div class="spoiler"><p>your content</p></div>

Gist

You can add Gists from github.

{ % gist sergiokopplin/91ff4220480727b47224245ee2e9c291 % }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Just a Test!</title> </head> <body> <h1>Working!</h1> </body> </html>

Codepen

You can add Pens from Codepen.

<p data-height="268" data-theme-id="0" data-slug-hash="gfdDu" data-default-tab="result" data-user="chriscoyier" class='codepen'>
    See the Pen <a href='http://codepen.io/chriscoyier/pen/gfdDu/'>Crappy Recreation of the Book Cover of *The Flame Alphabet*</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.
</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

See the Pen Crappy Recreation of the Book Cover of *The Flame Alphabet* by Chris Coyier (@chriscoyier) on CodePen.

Slideshare

Add your presentations here!

<iframe src="//www.slideshare.net/slideshow/embed_code/key/hqDhSJoWkrHe7l" width="560" height="310" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>

Videos

Do you want some videos? Youtube, Vimeo or Vevo? Copy the embed code and paste on your post!

Example

<iframe width="560" height="310" src="https://www.youtube.com/embed/r7XhWUDj-Ts" frameborder="0" allowfullscreen></iframe>

Markdown Common Elements

2016-02-24T22:44:00-05:00

Summary:

You can pick as item to see how to apply in markdown.

Comum Elements

Basic formatting
Headings
Lists
Paragraph Modifiers
Urls
Horizontal Rule
Images
Code

Basic formatting

This note demonstrates some of what Markdown is capable of doing.

And that’s how to do it.

This note **demonstrates** some of what [Markdown][some/link] is *capable of doing*.

Headings

There are six levels of headings. They correspond with the six levels of HTML headings. You’ve probably noticed them already in the page. Each level down uses one more hash character. But we are using just 4 of them.

Headings can be small

# Heading
## Heading
### Heading
#### Heading

Lists

Ordered list

Item 1
A second item
Number 3

1. Item 1
2. A second item
3. Number 3

Unordered list

An item
Another item
Yet another item
And there’s more…

* An item
* Another item
* Yet another item
* And there's more...

Paragraph modifiers

Quote

Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

> Here is a quote. What this is should be self explanatory.

URLs

URLs can be made in a handful of ways:

A named link to Mark It Down.
Another named link to Mark It Down
Sometimes you just want a URL like http://markitdown.net/.

* A named link to [MarkItDown][3].
* Another named link to [MarkItDown](http://markitdown.net/)
* Sometimes you just want a URL like <http://markitdown.net/>.

Horizontal rule

A horizontal rule is a line that goes across the middle of the page. It’s sometimes handy for breaking things up.

---

Images

Markdown can also contain images. I’ll need to add something here sometime.

![Markdowm Image][/image/url]

Figure Caption?

![Markdowm Image][/image/url]
<figcaption class="caption">Photo by John Doe</figcaption>

Photo by John Doe

Bigger Images?

![Markdowm Image][/image/url]{: class="bigger-image" }

Code

A HTML Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Just a test</h1>
</body>
</html>

A CSS Example:

pre {
    padding: 10px;
    font-size: .8em;
    white-space: pre;
}

pre, table {
    width: 100%;
}

code, pre, tt {
    font-family: Monaco, Consolas, Inconsolata, monospace, sans-serif;
    background: rgba(0,0,0,.05);
}

A JS Example:

// Sticky Header
$(window).scroll(function() {

    if ($(window).scrollTop() > 900 && !$("body").hasClass('show-menu')) {
        $('#hamburguer__open').fadeOut('fast');
    } else if (!$("body").hasClass('show-menu')) {
        $('#hamburguer__open').fadeIn('fast');
    }

});