react-bingmaps infobox not showing images - javascript

I am using react-Bingmaps to show map of location and infobox with shop photo. Everything works well except image, he doesn't load. File path is correct so where is problem in my code?
import React from 'react';
import { ReactBingmaps } from 'react-bingmaps';
class Map extends React.Component {
render(){
return(
<div className={'map'}>
<ReactBingmaps
bingmapKey='deleted_key'
center={[54.73695, 25.21741]}
zoom={15}
pushPins={[{
'location': [54.73695, 25.21741],
'option': {color: 'black'}
}]}
infoboxes={[{
'location': [54.73695, 25.21741],
'option': {
title: 'deleted_title',
description: "<img src={require('./media/shop-small.svg')} alt='Parduotuvės nuotrauka' />"
}
}]}
>
</ReactBingmaps>
</div>
)
}
}
export default Map;

Related

How to use a react component as the label in Highcharts?

I have a bubble map chart that shows the location of cities on the map. The map has the default label but I want to use a custom react component as the label on the map. This is my source code but it has error and doesn't work:
import React, { Component, Fragment } from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import HighchartsMap from "highcharts/modules/map";
import mapData from "#highcharts/map-collection/countries/gb/gb-all.geo.json";
import proj4 from "proj4";
import CustomLabel from "./CustomLabel";
HighchartsMap(Highcharts);
class BubbleMapChart extends Component {
render() {
const options = {
chart: {
map: "countries/gb/gb-all",
proj4
},
series: [
{
name: "countries",
nullColor: "#fff",
showInLegend: false,
mapData: mapData
},
{
// Specify points using lat/lon
type: "mapbubble",
// PAY ATTENTION TO THIS SECTION - USE A CUSTOM LABEL COMPONENT
dataLabels: {
enabled: true,
format: <CustomLabel name={"point.name"} />
},
minSize: "5%",
maxSize: "15%",
showInLegend: true,
data: [
{
name: "London",
lat: 51.507222,
lon: -0.1275
},
{
name: "Birmingham",
lat: 52.483056,
lon: -1.893611
}
]
}
]
};
return (
<HighchartsReact
highcharts={Highcharts}
options={options}
constructorType={"mapChart"}
/>
);
}
}
and this is a customLabel component as an example:
import React, { Component } from "react";
class CustomLabel extends Component {
render() {
return (
<div>
{/* Doesn't show this Division (actually doesn't apply the style ...) */}
<div
style={{ BackgroundColor: "red", width: "10px", height: "10px" }}
></div>
<span>{this.props.name}</span>
<br />
{/* Doesn't show the red bullet inside the text */}
<Badge color="#f50" text={this.props.name} />
</div>
);
}
}
export default CustomLabel;
How can I customize the data label in highcharts? actually I want to use a custom component as the label.
Use ReactDOMServer and renderToStaticMarkup or renderToString method in formatter function for data labels:
dataLabels: {
enabled: true,
formatter: function () {
return renderToStaticMarkup(<CustomLabel name={this.point.name} />);
}
}
Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-40icn?file=/demo.jsx
Docs: https://reactjs.org/docs/react-dom-server.html
API Reference: https://api.highcharts.com/highmaps/series.mapbubble.dataLabels.formatter
Or if you need to use some reactive logic inside CustomLabel take advantage of Portals in React.
Docs: https://reactjs.org/docs/portals.html
Example: https://www.npmjs.com/package/highcharts-react-official#how-to-add-react-component-to-a-charts-element

passing icons into a JS object

I have a js file with an array of objects, I am trying to load the attributes dynamically with a component and I cannot seem to figure out how to pass icons to the rendering component.
Here is the component that I am using to render the data:
import React, { Component } from 'react';
import SkillData from '../../store/skillData';
import './SkillsCard.css';
class SkillsCard extends Component {
state = { }
renderSkills = () =>
SkillData.map((skill, _id) =>
<div key={_id} className="skillCard col-sm-3 m-2">
<div className="top">
{/* ***line in question*** */}
<div className="icon">{skill.icon}</div>
<h5>{skill.title}</h5>
</div>
<div className="bottom">
{skill.techs.map((tech,index)=>(
<div className='skillCardList' key={index}> {tech}</div>
))}
</div>
</div>
);
render() {
return (
this.renderSkills()
);
}
}
export default SkillsCard;
and here is the file that I am pulling data from:
const SkillData = [
{
_id: '1',
icon: '../../assets/icons/frontend.png',
title: 'Front End',
techs: ['HTML5', 'CSS | SCSS', 'JavaScript', 'React | Redux', 'Angular']
},
{
_id: '2',
icon: '../../assets/icons/server.png',
title: 'Back End',
techs: ['NodeJS', 'Express', 'Postman', 'Authentication | Authorization']
},
{
_id: '3',
icon: '../../assets/icons/database.png',
title: 'Databases',
techs: ['MongoDB', 'mySQL', 'PostgreSQL']
}
]
export default SkillData
The issue that I am having is that I cannot get the path name to the icons to evaluate and actually render the icon; Instead my component renders the text, listed on the path. All the other attributes render just fine! Any thoughts?
Because you're just rendering the string value to the page:
<div className="icon">{skill.icon}</div>
Did you mean to use an <img> element?:
<div className="icon">
<img src={skill.icon} />
</div>
This worked when I added
const icons = require.context('../assets/icons', true);
in the SKillData.js file and set the paths to:
icons('./iconName.png'),
Thanks a million, David!
This works for me.
Direct require from your local assets folder, so you dont need the complexity to head file import a link from a json file request
{/* line in question */}
<div className="icon">
<img src={require(`${skill.icon}`)} />
</div>

Image not showing up on Page

I'm making a portfolio website, and I'm trying to make logo images show up, but they're not showing up.
Originally, I had the content in the this.state in HomePage.js, but I decided it would be neater to put it in a different file. The images showed up when they were in HomePage.js.
Relevant Code
HomePageContent.js
// Image import statements
import Image1 from '../img/Image1.jpg';
import Image2 from '../img/Image2.jpg';
let HomePageContent = {
jobs: [{
logo: {Image1},
companyName: 'Company1' ,
title: 'Job1',
startMonth: 'November 2019',
endMonth: 'Present',
location: 'Location1',
desc: 'Placeholder',
id: 1
}, {
logo: {Image2},
companyName: 'Company2',
title: 'Job2',
startMonth: 'June 2018',
endMonth: 'May 2019',
location: 'Location2',
desc: 'Placeholder',
id: 2
}]};
export default HomePageContent;
HomePage.js
import React from 'react';
// Component import statements
import JobsList from '../components/JobsList.js';
// Content import Statements
import HomePageContent from '../content/JobsContent.js';
class Home extends React.Component {
constructor(props) {
super(props);
this.state = HomePageContent;
}
render() {
return(
<div>
<h4>Here's what I've done</h4>
<JobsList jobs={this.state.jobs}/>
</div>
)
}
}
export default Home;
JobsList.js
import React from "react";
import Jobs from "./Jobs";
function JobsList(props) {
return (
<div className="JobsList">
{props.jobs.map(j =>
<Jobs logo={j.logo}
companyName={j.companyName}
title={j.title}
startMonth={j.startMonth}
endMonth={j.endMonth}
location={j.location}
desc={j.desc}key={j.id}/>
)}
</div>
);
}
export default JobsList;
Jobs.js
import React from 'react';
import '../css/Experience.css';
function Jobs(props) {
console.log(props.name);
return (
<div className='exp-container'>
<img src={props.logo} alt='Logo' />
<div className='content'>
<div>{props.companyName}</div>
<div>{props.title}</div>
<div>{props.startMonth} - {props.endMonth}</div>
<div>{props.location}</div>
<div><p>{props.desc}</p></div>
</div>
</div>
);
}
export default Jobs;
<img src={props.logo} alt='Logo' />
You are trying to read the image from the logo property. (Aside: Your alt text isn't useful).
logo: {Image1},
… but the value of the logo property isn't an image. It is another object. That object has a property named Image1 and the value of that property is an image.
Don't create an extra object; just assign the image to the logo property:
logo: Image1,

React-Native Tab Bar: Remove horizontal line (React Native UI Kitten + React Navigation)

Using the react-native-ui-kitten components BottomNavigation and BottomNavigationTab in my app running on iPhone (expo v2.21.2, react-native v0.57.1 ), there is a horizontal line on the top of the currently selected BottomNavigationTab which contains both the title and an icon.
From my app:
Test B tab is selected and has the unwanted horizontal line above the icon.
From the docs:
The BottomNavigation docs show that when both the title and icon are defined, there is no horizontal line on the selected tab. But this is not the case for me.
Question: How can the horizontal line be removed?
My Code:
import { View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, Avatar } from 'react-native-ui-kitten';
class BottomNavigationShowcase extends React.Component {
...
render () {
return (
<BottomNavigation
selectedIndex={this.state.selectedIndex}
onSelect={this.onTabSelect}
>
<BottomNavigationTab title='Test A' icon={this.renderIconA} />
<BottomNavigationTab title='Test B' icon={this.renderIconB} />
<BottomNavigationTab title='Test C' icon={this.renderIconC} />
<BottomNavigationTab title='Test D' icon={this.renderIconD} />
</BottomNavigation>
);
}
}
const TabNavigator = createBottomTabNavigator(
{
TestA: TestAScreen,
TestB: TestBScreen,
TestC: TestCScreen,
TestD: TestDScreen
}, {
initialRouteName: 'TestA',
tabBarComponent: BottomNavigationShowcase
}
)
const RootNavigator = createSwitchNavigator({
Main: TabNavigator,
}, {
initialRoute: "Main"
})
Just try to add a property to the BottomNavigation-component: appearance='noIndicator'. Looks like we've forgotten display this ability in the documentation. Hope this helps.

Having trouble getting google map to appear on react page

I am simply trying to put a google map on a page to start in a react project, and am having trouble. The div with the id="map" shows, but not the map inside it.
I'm following the google map API docs for JS, but obviously I must be doing something wrong. I would like to avoid using react-google-maps since I am used to using straight google maps api in another framework.
Here is my component google_map.js:
import React, { Component } from 'react';
class GoogleMap extends Component {
componentDidMount() {
new google.maps.Map(this.refs.map, {
zoom: 12,
center: {
lat: 37.7952,
lng: -122.4029
}
});
}
render() {
return <div ref="map" />;
}
}
export default GoogleMap;
import React, { Component } from 'react';
import GoogleMap from './google_map';
Here is where I am trying to put the map:
class Feature extends Component {
render() {
return (
<div id="map">
<GoogleMap />
</div>
);
}
}
export default Feature;
Style.css:
#map {
height: 300px;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
I presume you have to add
shouldComponentUpdate {
return false
}
to your GoogleMap component.
Explanation: probably, React.js synchronizes its virtual DOM with real (which is going to be modified by google maps). Further reading: https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Categories