I'm trying to customize my web application's map, I'm using react-map-gl (Uber opensource code) I try to change the map's icon pins but I could not figure out, what does the string code ICON mean?
import React, { PureComponent } from 'react';
const ICON = M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
C20.1,15.8,20.2,15.8,20.2,15.7z;
const pinStyle = {
cursor: 'pointer',
fill: '#d00',
stroke: 'none'
};
export default class CityPin extends PureComponent {
render() {
const { size = 20, onClick } = this.props;
return (
<svg
height={size}
viewBox="0 0 24 24"
style={{ ...pinStyle, transform: `translate(${-size / 2}px,${-size}px)` }}
onClick={onClick}
>
<path d={ICON} />
</svg>
);
}
}
What does it mean all those numbers in ICON const? How can I change the style based on this code? Please help, thanks :)
All of the gibberish that is the ICON constant is SVG Path notation and is actually drawing your current symbol. If you want to learn more about it, here is another resource. There are even websites that can help you build your own SVG path string, Option 1 Option 2, and searching the web will pull up many more.
Note that you likely need to update the viewbox numbers to fit your new thing once you have the symbol you want. It otherwise chops off the symbol at those dimensions.
In trying to figure this out, my example update was:
const ICON = 'm 10 35 l 15 30 l 15 -30 A 20 20 180 1 0 10 35 z'
with a viewbox in the svg tag of:
viewBox="-8 0 55 65"
EDIT:: you can also use any image as explained in the other answers. There is an article on using custom images at Medium with a good explanation and more details.
You mentioned you're using react-map-gl, so you could use the Marker component to change your icon pins.
Is there a specific image you'd like to use for your icons, say a .png file? If so, add that image to the directory called "public." Then, in your map where you create the markers, you can display this specific image.
For example, if you have an image called mapicon.png, you'd add that to your public folder. Then, when you're creating your markers, you could do something like this.
import ReactMapGL, {Marker} from 'react-map-gl';
<Marker key={} latitude={} longitude={}>
<img
src="mapicon.png"
alt="map icon"
/>
</Marker>
From what I understand, the string is just a reference to where the icon image is stored. Hope this helps!
You can create a custom map marker with an SVG file. If you are using create-react-app, you can import your svg icon as a component like this:
import { ReactComponent as Pin } from '../../images/map-marker-icon.svg';
Then, in your example code above you can replace the
<path d={ICON} />
with this component. Here is an example:
export default class MapPin extends PureComponent {
render() {
<Marker longitude={this.props.longitude} latitude=this.props.latitude}>
<svg
onClick={() => onClick()}
viewBox="0 0 60 100"
enable-background="new 0 0 60 100">
<Pin/>
</svg>
</Marker>
));
}
}
Can someone tell me how to change the width of my React bootstrap button?
I am just playing around with it
I've imported the Button component from react-bootstrap which I've added
import {Button, ButtonGroup } from 'react-bootstrap';
The button seems to have a max width of 100. How can I increase the width of the button to 200 for example?
<Button
class="btn btn-outline-primary mr-xl-5 w-100"
...
>{ctrl.label}</Button>
When you use the w-100 class, you are setting the button to be 100% of the width of its parent element.
Let's assume that the parent element is a set width, (say 100px). If you set the button to be 100% of the width of it's parent, then the button will be 100px wide too. You cannot set a width wider than 100%.
To get around this, you can make the width of the parent element wider (by setting it to say 200px). Then, the button will stretch to fill the parent and will be 200px wide.
Let me know if that helps!
I'm trying to display an image with a URI location instead of a static image and it's not working. I'm getting the red screen with the message:
You are trying to render the global Image variable as a React element.
You probably forgot to require Image.
I simply took the default project (react-native init awesomeProject) and added this inside the View after the two Text elements:
<Image
style = {styles.base}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
/>
and I enhanced the styles with an additional property:
base: {
height: 400,
width: 400
},
I can't figure out why this wouldn't work as this is the simple example in the React Native docs. Any advice?
Make sure to actually require the Image component:
var React = require("react-native");
var Image = React.Image;
I'm trying to display a resized image in a flex mobile application and I couldn't get it displayed correctly.
When set to width="100%" it looks OK. (Image 1)
When I scale it down to let's say 30% by Flex (scaleMode="letterbox"), it is scaled down, but the components above and below the image still keep the distance from the Image control as it were 100% height. (Image 2)
I tried dozens of layout tricks from autolayout=true to dynamically scaled elements, but couldn't find a solution. What am I doing wrong?
(I use Flash Builder 4.7, Flex 4.6 and Air SDK 13.0 on a 64-bit Win 7 Machine.)
Thank you for your answer, really appreciate it! However, this is unfortunately not a solution as it just sets the height the same as width. In this case, the two labels gets closer to the image, but not in the place where they supposed to go.
Meanwhile I could find a way to correctly resize the image along with its bounding box.
The main idea is to put the image in a container, and adjust the image size according to the ratio of the container size divided by the original image size.
Then the image will fully fill the container, and I can then set the desired scaling ratio by adjusting the container's width.
Here is my code that works perfectly, and I really hope that it will help someone else in the future:
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.Image;
private var img:Image = new Image();
private function init():void {
drawImg("assets/image.png");
}
private function drawImg(src:String):void {
img.source = src;
img.scaleMode = "letterbox";
img.smooth = true;
imgHolder.addElement(img);
img.addEventListener(FlexEvent.READY, imgStatus);
}
private function imgStatus(e:FlexEvent):void {
var imgw:Number = e.currentTarget.bitmapData.width;
var imgh:Number = e.currentTarget.bitmapData.height;
var ratio:Number = Number(imgHolder.width/imgw);
img.width = imgw*ratio
img.height = imgh*ratio
}
]]>
</fx:Script>
<s:VGroup width="100%" horizontalAlign="center">
<s:Label text="Foo" />
<s:HGroup id="imgHolder" width="30%" />
<s:Label text="Bar" />
</s:VGroup>
First I always got a null object, so I found that I need to listen for the image to be fully loaded, and now it works perfectly.
Again, the desired width property can be set on the container and not the image.
Here's a screenshot with the results.
The height of the image indeed remains untouched by only setting the image width.
If you draw a rectangle around the image you will see the bounding box with the same size all the time.
You can modify your code like the following to have a dynamic height and have the labels positioned as you wish:
<s:VGroup width="100%"
horizontalAlign="center">
<s:Label verticalAlign="bottom"
text="Foo" />
<s:Image id="img"
source="test.gif"
width="30%"
height="{img.width}"
scaleMode="letterbox" />
<s:Label verticalAlign="top"
text="Bar" />
</s:VGroup>
how can i set the width for a toolbar button?
I've set it in the XUL and trying with the js but none of theses methods works using the
document.....setAttribute("style","width:50px")
How can i do that?
Thanks.
Having something like this:
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="toolbarbuttonID"
image='chrome://yourExt/content/images/logo.png'
class="toolbarbutton-1 chromeclass-toolbar-additional"
</toolbarbutton>
</toolbarpalette>
You can set the image size inside your css file:
#toolbarbuttonID .toolbarbutton-icon {
width: 50px
height:16px
}
If you want, you can also add an image of the height and width desired and add it as the button's image. It will stretch the size of the button: