This is using the https://github.com/visgl/react-map-gl fork.
Using vanilla JS, you use the 'load' callback to add a Source and then set the Terrain.
I was able to replicate this using React and useEffect, but the solution doesn't feel right. How does one properly do this in React?
first a Source should be returned as a child of the map:
{ Source } from "react-map-gl";
<Map ...>
<Source
id="mapbox-raster-dem"
type="raster-dem"
url="mapbox://mapbox.mapbox-terrain-dem-v1"
tileSize="512"
maxzoom="14"/>
</Map>
and now you can specify the Terrain style inside the Map component:
terrain={{
source: "mapbox-raster-dem",
exaggeration: 2,
}}
full code:
const MapInstance = () => {
return (
<Map
...
terrain={{
source: "mapbox-raster-dem",
exaggeration: 2,
}}
>
<Source
id="mapbox-raster-dem"
type="raster-dem"
url="mapbox://mapbox.mapbox-terrain-dem-v1"
tileSize="512"
maxzoom="14"
/>
</Map>
);
};
Related
I am trying to use react-leaflet with preact with little success. I do actually render the map but it is not rendered together, as in the tiles are scattered over the page and outside the containing element.
I have read all (some) related questions on SO that say you need to either import the css file from leaflet (import "leaflet/dist/leaflet.css") or include a css file with a class for .leaflet-container. I have tried both and it is still not working.
I followed the instruction on the react leaflet website to install the necessary dependencies.
My project uses rollup so I added the following to my rollup config:
alias({
entries: [
{ find: 'react', replacement: 'preact/compat' },
{ find: 'react-dom', replacement: 'preact/compat' },
{ find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
{ find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
]
}),
And my component looks like this:
import { h } from 'preact';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import { Icon } from "leaflet";
import "../../styles/leaflet.css";
const Map = (): JSX.Element => {
type LatLngTuple = [number, number];
const position: LatLngTuple = [51.505, -0.09];
return (
<MapContainer center={position} zoom={13} scrollWheelZoom={false} >
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
);
};
export default Map;
I imported the image like this :
import img from '../public/buildingspattern.png'
then used it in the component :
<Card className={classes.root}>
<CardMedia
className={classes.media}
image={img}
title="Buildings"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Something
</Typography>
</CardContent>
</Card>
then I fixed my next.config.js
const webpack = require('webpack');
module.exports = {
i18n: {
locales: ["en", "fr"],
defaultLocale: "en",
},
webpack: (config, options) => {
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
},
],
})
return config
},
};
I think I miss something here
The App starts fine, But the image isn`t there.
That's what I see in the webpage after I yarn dev
<div class="MuiCardMedia-root
makeStyles-media-16"
style="background-
image:url("8a955c62dc9b08f560cb800b273932ac.png")"
title="Buidings">
</div>
I came across another way as I just implemented it today..
Which is simpler and more efficient,
Go to the Card component in MaterialUi
Replace the standard <img/> tag with <Image /> tag
Also please add import Image from 'next/image'
Suppose you create a component for returning Image
import Image from 'next/image';
function ImageComponent() {
return (
<Image src="../public/someImage.png" alt="Buildings Pattern"/>
);
};
And use this component in your image attribute using interpolation as you did above
image={ImageComponent}
✌
First of all, You can use the absolute path of the image in next.js like this /image-name, If don't work you will create a directory in the public directory as name static and put your image in the static directory then you can access /static/image name
I want to include an external rtf component in my svelte app.
I tried adding tinymce using the cdn in template.htm and then creating the following svelte component. The editor renders, however I can't get data into or out of the editor.
<script>
import { onMount, tick } from 'svelte'
export let label = ''
export let value = ''
$: console.log('value', value)
onMount(() => {
tinymce.init({
selector: '#tiny',
})
})
</script>
<p>
<label class="w3-text-grey">{label}</label>
<textarea id="tiny" bind:value />
</p>
Super old but encountered this today and found a solution.
Solution:
<svelte:head>
<script src="https://cdn.tiny..."></script>
</svelte:head>
<script>
import {onMount} from 'svelte';
let getHTML;
let myHTML;
onMount(() => {
tinymce.init({
selector: '#tiny'
})
getHTML = () => {
myHTML = tinymce.get('tiny').getContent();
}
})
</script>
<textarea id="tiny" bind:value />
<!-- click to get html from the editor -->
<button on:click={getHTML}>Get HTML from TinyMCE</button>
<!-- html is printed here -->
{myHTML}
Explanation:
My initial thought was to bind per normal with
<textarea bind:value></textarea>
but that doesn't work I think because tinyMCE is doing complicated stuff in the background. Instead of adding the cdn reference in template.htm I used <svelte:head> so it only is loaded for this component. The function tinymce.get('...').getContent() must be called to get the contents of the editor, but it requires tinyMCE, so it must be called within the onMount. So I define a function getHTML within onMount. Now getHTML can be used anywhere to assign the contents of the editor to myHTML.
step one:
run this command on in your terminal
npm install #tinymce/tinymce-svelte
(reference for installation : https://www.tiny.cloud/docs/integrations/svelte/)
step two :
<script>
import { onMount } from 'svelte';
let myComponent;
let summary='';
onMount(async()=>{
const module=await import ('#tinymce/tinymce-svelte');
myComponent=module.default;
})
</script>
step three :
<svelte:component this={myComponent} bind:value={summary}/>
{#html summary}
I am working on an application using admin-on-rest framework. For editing an entry on a Resource we provide XXXEdit, XXXShow, XXXCreate props to it. My requirement is that when I click on an Edit button in List view on any entry I should get a Dialog box with the parameters in XXXEdit instead of going to a new page. I tried doing this by using a Dialog in XXXEdit component
<Edit title={<RoleTitle />} {...props}>
<SimpleForm>
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={true}
>
<TextInput source="id" />
<TextInput source="name" validate={required} />
.
.//some more fields
</Dialog>
</SimpleForm>
</Edit>
I get errors like The TextInput component wasn't called within a redux-form
If I use a DisabledInput then I get an error cannot read value of undefined
How do I go on with this?
I do not think you can use Simpleform for this. You will need to create a custom Form using Redux-Form. Look at the bottom answer that documents the final answer.
This might help you
How to richly style AOR Edit page
Instead of creating a page. You are creating a component that connects to the Redux state and displays as a dialog box.
I tried to resolve this using HOC and react-router.
I created a button using AOR button and provided a containerElement
containerElement={
<Link
key={record.id}
to={{
...{
pathname: `${basePath}/${encodeURIComponent(record.id)}`
},
...{ state: { modal: true } }
}}
/>
}
I created a route like this where DialogRoleEdit is an AOR edit component wrapped with a dialog HOC below .
<Route
exact
path="/roles/:id"
render={routeProps => {
return !!(
routeProps.location.state && routeProps.location.state.modal
) ? (
<Restricted authClient={authClient} location={routeProps.location}>
<div>
<RoleList resource={"roles"} {...routeProps} />
<DialogRoleEdit resource={"roles"} {...routeProps} />
</div>
</Restricted>
) : (
<Restricted authClient={authClient} location={routeProps.location}>
<RoleEdit resource={"roles"} {...routeProps} />
</Restricted>
);
}}
/>
Finally an HOC
handleClose = () => {
this.props.history.goBack();
};
render() {
const actions = [
<FlatButton label="Cancel" primary={true} onClick={this.handleClose} />
];
return (
<Dialog>
<WrappedComponent/>
</Dialog>
)
}
We need to provide edit prop for this resource in App.js
edit={DialogUserEdit}
Some libraries like material-ui require to add components as properties to another react component.
JSX Example (See live/complete):
render() {
const actions = [
<FlatButton
label="Cancel"
primary={true}
onTouchTap={this.handleClose}
/>,
<FlatButton
label="Submit"
primary={true}
keyboardFocused={true}
onTouchTap={this.handleClose}
/>,
];
return (
<div>
<RaisedButton label="Dialog" onTouchTap={this.handleOpen} />
<Dialog
title="Dialog With Actions"
actions={actions}
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
The actions in this window were passed in as an array of React objects.
</Dialog>
</div>
);
}
I wonder if this is possible in purescript-pux. The following approach does not work. Is there a way which works?
foreign import raisedButtonClass :: ? props. ReactClass props
raisedButton = reactClassWithProps raisedButtonClass "RaisedButton"
foreign import dialogClass :: ? props. ReactClass props
dialog = reactClassWithProps dialogClass "Dialog"
...
dialog {
-- the next line does not work
actions: [(raisedButton {label: "Close"} #! onClick (const ToggleDialog) $ mempty)],
open: state.isDialogOpen,
title: "Dialog Title"
}
#! (on "onRequestClose" (const ToggleDialog))
$ text "Dialog Text"
You can find a complete example here: https://github.com/shybyte/pux-starter-app-material-ui/blob/master/src/Main.purs