I'm new to extjs and cant find a way to put a google StreetView inside a panel. Can someone point me in the right direction?. I have tried from interpreting an html inside a panel to the old GMapPanel but I doesn't work.
Currently I have this function where the panel shows up but doesn't show the street view
function () {
alert("mostrar street view");
new Ext.Panel({
id: "streetView",
xtype: "map",
constrain: true,
floating: true,
resize: true,
width: 600,
height: 400,
closable: true,
style: {
backgroundColor: "#fff",
//backgroundColor: '#000',
border: "1px solid black",
},
listeners: {
click: Ext.Window({
layout: "fit",
closeAction: "hide",
title: "GPanorama Window",
width: 400,
height: 300,
x: 480,
y: 60,
items: {
xtype: "gmappanel",
gmapType: "panorama",
setCenter: {
lat: 42.345573,
long: -71.098326,
},
},
}),
},
draggable: {
delegate: "div",
},
}).show();
I have also tried placing the property html as follows html:'CODE-BELOW'
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
</style>
<script>
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{ position: fenway, pov: { heading: 34, pitch: 10 } }
);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
async></script>
</body>
Related
I am trying to make Google Map with multiple markers and search box with different Infowindow of our locations in only one country on click and I am not able to do further,
I have written this Code:-
<html>
<head>
<title>Medplus Clinic Locator</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- <link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script> -->
<link rel="stylesheet" href="map-style.css">
<script src="mapjs.js"></script>
</head>
<style>
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px poppins, Arial, sans-serif;
overflow: hidden;
font-family: Roboto;
padding: 0;
}
#pac-container {
padding: 10px 5px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 12px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #1B5EA9;
}
#title {
color: #fff;
background-color: #1B5EA9;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
</style>
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 52.632469, lng: -1.689423 },
zoom: 7,
mapTypeControl: false,
});
const card = document.getElementById("pac-card");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
const center = { lat: 53.81078096004558, lng: -1.5359415045562201 }; /* old { lat: 50.064192, lng: -130.605469 }*/
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
bounds: defaultBounds,
componentRestrictions: { country: "uk" },
fields: ["address_components", "geometry", "icon", "name"],
strictBounds: false,
types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Set initial restriction to the greater list of countries.
autocomplete.setComponentRestrictions({
country: ["uk"],
});
const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);
autocomplete.setBounds(newBounds);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map, anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No address available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(14); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
let address = "";
ma
if (place.address_components) {
address = [
(place.address_components[0] &&
place.address_components[0].short_name) ||
"",
(place.address_components[1] &&
place.address_components[1].short_name) ||
"",
(place.address_components[2] &&
place.address_components[2].short_name) ||
"",
].join(" ");
}
infowindowContent.children["place-icon"].src = place.icon;
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent = address;
infowindow.open(map, marker);
});
// Sets a listener on a given radio button. The radio buttons specify
// the countries used to restrict the autocomplete search.
function setupClickListener(id, uk) {
const radioButton = document.getElementById(id);
radioButton.addEventListener("click", () => {
autocomplete.setComponentRestrictions({ country: uk });
});
}
setupClickListener("changecountry-usa", "uk");
setupClickListener("changecountry-usa-and-uot", ["uk"]);
// Set the map's style to the initial value of the selector.
const styleSelector = document.getElementById("style-selector");
map.setOptions({ styles: styles[styleSelector.value] });
// Apply new JSON when the user selects a different style.
styleSelector.addEventListener("change", () => {
map.setOptions({ styles: styles[styleSelector.value] });
});
}
const styles = {
default: [],
silver: [
{
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }],
},
{
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
elementType: "labels.text.fill",
stylers: [{ color: "#616161" }],
},
{
elementType: "labels.text.stroke",
stylers: [{ color: "#f5f5f5" }],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [{ color: "#bdbdbd" }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{ color: "#eeeeee" }],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [{ color: "#757575" }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#e5e5e5" }],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{ color: "#757575" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ color: "#dadada" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#616161" }],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [{ color: "#e5e5e5" }],
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [{ color: "#eeeeee" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#c9c9c9" }],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
],
/* adding multiple markers */
}
window.initMap = initMap;
</script>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">Find the Medplus nearest Clinic</div>
<div id="country-selector" class="pac-controls">
<input type="radio" name="type" id="changecountry-usa" />
<label for="changecountry-usa">Search by Post Code/Region</label>
<input type="radio" name="type" id="changecountry-usa-and-uot" checked="checked"/>
<label for="changecountry-usa-and-uot">Search by Address</label
>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location" />
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon" />
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
<!-- map coloring to sliver -->
<div id="style-selector-control" class="map-control">
<select id="style-selector" class="selector-control">
<option value="silver">Silver</option>
</select>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</body>
</html>
I want to make like this as mentioned (screen shot)
enter image description here
anyone please resolve this if possible, thank you!
import { Flowchart } from '#ant-design/flowchart';
import "#ant-design/flowchart/dist/index.css";
const IndicatorNode = (props:any) => {
const { size = { width: 120, height: 50 }, data } = props;
const { width, height } = size;
const { label = 'john', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;
return (
<div
className="indicator-container"
style={{
position: 'relative',
display: 'block',
background: '#fff',
border: '1px solid #84b2e8',
borderRadius: '2px',
padding: '10px 12px',
overflow: 'hidden',
boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
width,
height,
borderColor: stroke,
backgroundColor: fill,
color: fontFill,
fontSize,
}}
>
<div style={{ color: fontFill }}>{label}</div>
</div>
);
};
export designer = () => {
return (
<div style={{ height: 600 }}>
<Flowchart
onSave={(d) => {
console.log(d);
}}
toolbarPanelProps={{
position: {
top: 0,
left: 0,
right: 0,
},
}}
scaleToolbarPanelProps={{
layout: 'horizontal',
position: {
right: 0,
top: -40,
},
style: {
width: 150,
height: 39,
left: 'auto',
background: 'transparent',
},
}}
canvasProps={{
position: {
top: 40,
left: 0,
right: 0,
bottom: 0,
},
}}
nodePanelProps={{
position: { width: 160, top: 40, bottom: 0, left: 0 },
defaultActiveKey: ['custom'], // ['custom', 'official']
registerNode: {
title: 'abc',
key:"abc",
nodes: [
{
component: IndicatorNode,
popover: () => <div>abcs</div>,
name: 'custom-node-indicator',
width: 120,
height: 50,
label: 'abc',
},
],
},
}}
detailPanelProps={{
position: { width: 200, top: 40, bottom: 0, right: 0 },
}}
/>
</div>
);
}
I want to create new custom code with api configurations and once I click on that node it shows the editable custom properties on right panel.
in custom node of #ant-design/flowchart can I add my custom editable properties? that are showing on right panel once I clink on node.. Can someone provide me any reference for that?
I want to create a doughnut highchart using angular js.
javascript is-
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -180,
endAngle: 180,
center: ['50%', '55%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.9,
dataLabels: {
enabled: false
}
}
]
}]
});
});
html is-
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
and I am including these scripts files -
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
How would I convert the above script in angular js. Can anyone help me on this?
I think some directive function needs to be created.I am new to custom directives in angular, can anybody help how we do this in angular for the doughnut highchart?
No need to convert the highcharts in angular as its already exists. No need to inject the dependencies. You can use it directly. Just inject the highcharts
files
<script src="script/chart/highcharts.js"></script>
<script src="script/chart/highcharts-more.js"></script>
<script src="script/chart/drilldown.js"></script>
<script src="script/chart/highcharts-3d.js"></script>
<script src="script/chart/exporting.js"></script>
as per need. and in controller use directly the Highcharts.chart({//code goes here}). Here is the link for donut highchart
I'm using nvd3js for angular (http://krispo.github.io/angular-nvd3/#/), and I would like to add a text right after the title (in this case the title is 98%) and the text to be added is "done". I was able to make it work so far, but I couldn't seem to make it work. This is my plunkr so far: http://plnkr.co/edit/KSdnFepUaI4MUCwAQJgP?p=preview
chart: {
type: 'pieChart',
height: 100,
width: 200,
donut: true,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: false,
showLegend: false,
title: '89%',
transitionDuration: 500,
tooltips: false,
donutRatio: 1
}
<nvd3 options="options" data="data"></nvd3>
<style>
.nv-pie-title {
text-anchor: middle;
font-size: 95px !important;
fill: #cccccc !important;
}
</style>
Can any one help me to display image totally in the image panel.50% of the screen should display image and another 50% has some menus. In the 50% image block , I am not getting image fully. Here is my snippet.
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullScreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [
{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [
{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}
]
},
{
xtype: 'spacer'
},
{
xtype: 'panel',
layout: 'hbox',
items: [
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
},
{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}
]
},
{
xtype: 'spacer'
}
]
}
});
and here is my css
.mainbackgpanl > div{
background: url("http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg") center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:cover;
}
Thanks in Advance.
In trying to simplify your use case, I come up with this code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
layout: "fit",
items: [{
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}]
});
}
});
Which apart from not loading the images (as I do not have them) it works fine, you can see a Sencha Fiddle HERE.
The main difference between my code and yours is that I have a parent panel with layout: 'fit' so that it takes up all the space available, then added the hbox layout in two child components below.
EDIT: If you are trying to make the images fill the containers so that they are both 50% width, you'll need to remove the height and width attributes width="64px" height="64px". ExtJs has an Image component which may be better to use in this case.
I think your code actually works fine if you were to change fullScreen to fullscreen have a look at the demo here
Ext.define('scheduler.view.Main', {
extend: Ext.Panel,
xtype: 'main',
config: {
fullscreen: true,
layout: 'vbox',
scrollable: true,
cls: 'mainLayout',
height: '100%',
items: [{
cls: 'mainbackgpanl',
docked: 'top',
height: '50%'
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'button',
width: '50%',
layout: {
pack: 'center'
},
ui: 'normal',
text: '<div align="center"><img width="64px" height="64px" src="resources/images/calendar-icon.png" style="vertical-align: middle"><br /><p class="icon_text">Calendar</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onCalendarTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/book-event.png" style="vertical-align: middle"><br /><p class="icon_text">Book Event</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBookEventTap();
}
}]
}, {
xtype: 'spacer'
}, {
xtype: 'panel',
layout: 'hbox',
items: [{
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/events.png" style="vertical-align: middle"><br /><p class="icon_text">Events</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onEventsTap();
}
}, {
xtype: 'button',
ui: 'normal',
width: '50%',
layout: {
pack: 'center'
},
text: '<div align="center"><img width="64px" height="64px" src="resources/images/blocked.png" style="vertical-align: middle"><br /><p class="icon_text">Blocked</p></div>',
style: 'background: none; border:none;',
handler: function() {
scheduler.f.onBlockedTap();
}
}]
}, {
xtype: 'spacer'
}]
}
});
Have a look at the demo here https://fiddle.sencha.com/#fiddle/gu5