I'm trying to add custom html marker in my layer renderer.
<div>
<h1>Eg.</h1>
</div>
So far no success. From what I understand there's no way to do it but maybe someone has found a workaround.
https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-MarkerSymbol.html
layer.renderer = {
type: "simple",
symbol: {
type: "simple-marker", <-- this would be "html"
outline: {
width: 0.5,
color: "white"
}
}
};
I encountered the same scene and referred to this：
git repository
demo
Related
I am trying to use image as background using tailwind css in Create react app. But can't figure out how to add background image class.
The error:
Module not found: Error: Can't resolve './src/images/pages/login.svg' in 'C:<some_project>\src'
what i tried:
backgroundImage: {
"login-image": "url('./src/images/pages/login.svg')",
},
// assumed it starts from src
backgroundImage: {
"login-image": "url('/images/pages/login.svg')",
},
// also tried to place it into public page and include like
backgroundImage: {
"login-image": "url('/images/pages/login.svg')",
},
Any help would be appreciated! Thanks
This is how I got mine to work:
In the tailwind.config.js, I added my background to extend (make sure to put your appropriate image url):
extend: {
backgroundImage: {
awlogo: "url('./images/aw-lg-logo.png')",
awOpac: "url('./images/awopac.png')"
},
},
Here is my App.js example:
import "./index.css";
function App() {
return (
<div className="grid place-items-center h-screen bg-blue">
<img
className="bg-no-repeat w-screen h-screen opacity-5 fixed overflow-hidden z-1 bg-cover bg-awOpac "
alt="aw logo opacity"
/>
</div>
);
}
where it says bg-awOpac that basically says:
.bg-awOpac {
background-image: url('./images/awopac.png');
}
Make sure you are giving the image a height and width as well.
I am using "tailwindcss": "^3.0.23"
Im using Gridsome frame work for VUE JS
I am navigating to a new page by using this.$router.push(PATH, PARAMS)
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})
The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:
it should be an object (which is what VALUE is set to) i.e.
I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?
gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -
Is this the issue?
Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?
Any help would be amazing here - please let me know if you need any further information.
Thanks -
W
UPDATE BASED ON CURRENT ANSWERS:
I have already added props:true to the component as shown below, but the issue is still present.
CODE SNIPPET - SUMMARY:
User clicks on the SectionTitle component, this then emits the page link
(each of the SectionTitle is a object from : sections array of Object)
To see the current online version of this please look at
wtwd.ninjashotgunbear.com
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/>
</div>
<PageTransition :dataObj="transitionObj"/>
</Layout>
</template>
<script>
import SectionTitle from '#/components/SectionTitle.vue';
import PageTransition from '#/components/PageTransition.vue'
export default {
metaInfo: {
title: 'Hello, world!'
},
components: {
SectionTitle,
PageTransition
},
data(){
return {
// data to be passed to the components
sections: [
{
sectionTitle: 'Clients',
sectionLink: 'clients',
sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
backgroundColor: '#F08080',
titleColor: '#E65454'
},
{
sectionTitle: 'Projects',
sectionLink: 'projects',
sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
backgroundColor: '#20B2AA',
titleColor: '#11DACF'
},
{
sectionTitle: 'Skills',
sectionLink: 'skills',
sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
backgroundColor: '#A921B2',
titleColor: '#CA14D6'
},
{
sectionTitle: 'About Me',
sectionLink: 'aboutme',
sectionSubTitle: `"My joruney becoming a developer so far"`,
backgroundColor: '#FFFFFF',
titleColor: '#D1D1D1'
},
{
sectionTitle: 'Contact Me',
sectionLink: 'contactme',
sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
backgroundColor: '#2185B2',
titleColor: '#0076AB'
}
],
divText: null,
transitionObj: null
}
},
methods:{
reRoute(value){
// 1)A) - change the text of the div to say the section it is being moved to
this.divText = value.sectionTitle
this.transitionObj = value
// FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
let centerPos = window.scrollY+(window.innerHeight/2)
// Apply secific Title color - and center possitioning
document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
// this.$router.push(value.sectionLink)
}, 700)
}
}
}
</script>
<style lang="scss">
// **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass
// Universal Font being used - LEMON MILK
#font-face {
font-family: LemonMilk;
src: url('../assets/fonts/LemonMilk.otf');
}
* {
box-sizing: border-box;
}
.navs {
font-family: LemonMilk;
}
.SectionTitle{
cursor: pointer;
}
</style>
Pass name rather than path in this.$router.push()
this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})
You should add props:true to the route definition :
{
path:'/thepath/:theParam',
component:SomeComponent,
props:true
}
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
I have a really simple Vue single-file component (using Vue 2.4.2) that includes an SVG image using a set of predefined SVG symbols and work perfectly.
I notice that the icon is briefly shown unstyled before the component (non-scoped) style is applied. Important to note that:
When including the scss in our main .scss file, the problem does not occur
Using v-cloak with has no effect
Occurs on latest Chrome, FF and Safari (MacOS)
Q: I can obviously use the workaround of including it in the main scss file, but I was wondering if this is SVG-styling specific or if a delay is normal when using component-style?
My component (additional scss omitted):
<template>
<i class="icon" v-if="symbol" :class="{'icon-spin': spinning}">
<svg>
<use v-bind:xlink:href="symbol"></use>
</svg>
</i>
</template>
<script>
export default {
name: 'Icon',
props: {
icon: {type: String},
spinning: {type: Boolean, default: false}
},
computed: {
symbol () {
return this.icon ? '#' + this.icon : ''
}
}
}
</script>
<style lang="scss">
#import '../../style/variables';
.icon {
display: inline-block;
width: $icon-size;
height: $icon-size;
line-height: 1;
svg {
width: 100%;
height: 100%;
fill: currentColor;
}
...
So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:
logo = {
xtype: 'component',
autoEl: {
src: 'http://addressofmyimage.com/image.png',
tag: 'img',
style: { height: 100, width: 100 }
}
};
Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...
I'd rather not just insert raw html, as I cannot format that as I wish.
Probably better off using a panel to display the image itself. Replace the above code with...
logo = {
xtype: 'panel',
html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
You could override the Component's getElConfig method and return what you have in your autoEl object.
{
xtype: 'component',
getElConfig : function() {
return {tag: 'img',
src: 'http://addressofmyimage.com/image.png',
style: { height: 100, width: 100 },
id: this.id};
}
}
That method is used when the component is rendered to get the makeup of the underlying element.
You can use src.sencha.io API to resize image as you wish. Belowed example works for me.
{
xtype: 'image',
src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
height: 100
}
You can find documentation here.