JSON-LD for more products in one page - json-ld

If I have more products in one page, how can I set JSON-LD?
<article>
Our car dealership is here to make sure your vehicle always performs at its best. We provide a diverse range of services to the manufacturer’s high standard, and you’ll receive a nu.....
</article>
<article>
ALFA ROME 2.0
<img ... />
</article>
<article>
ALFA ROME 3.0
<img ... />
<img ... />
</article>

yes i want use schema.org.
i have tried to do this for each car:
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "Alfa Romeo Giulietta 1.6 JTDm",
"model": "Giulietta",
"brand":"alfa romeo",
"fuelType":"Diesel",
"vehicleEngine":"Diesel - 4 cilindri in linea - Cilindrata: 1598 cm3 - 4 Valvole per cilindro - Sovralimentato - Potenza max: 88 kw (120CV) a 4.000 giri/min - Coppia max 32,6 kgm (320,0 Nm) a 1.750 giri/min - Euro 6 (715/2007 - 692/2008) - Potenza Fiscale 17 CV",
"description" : "Alfa Romeo Giulietta 1.6 JTDm - 2 120 CV Distinctive (05/2015)",
"image":"assets/img/annunci/alfa-romeo-giulietta-distinctive.jpg",
"offers":{
"#type": "Offer",
"priceCurrency": "EUR",
"price": "20.850"
}
}
</script>
<script type="application/ld+json">
{
"#context":"http://schema.org",
"#type":"Car",
"name": "FIAT Nuova Panda ",
"model": "new panda",
"brand":"fiat",
"fuelType":"Benzina",
"vehicleEngine":"Benzina - 4 cilindri in linea - Cilindrata: 1242 cm3 - 2 Valvole per cilindro - Potenza max: 51 kw (69CV) a 5.500 giri/min - Coppia max 20,4 kgm (102,0 Nm) a 3.000 giri/min - Euro 6 (715/2007 - 692/2008) Potenza Fiscale 14 CV",
"description" : "FIAT Nuova Panda 1.2 Lounge (07/2014)",
"image":"assets/img/annunci/fiat-500-x-1.6-pop-star.jpg"
}
</script>
....
but is correct (if one page have more car)? the real page is auto-calanca.it/promozioni.

Related

How do i show embed image from api

"content": [
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\">গেমটির কাহিনি গড়ে উঠেছে ইয়ারা নামের এক দেশকে কেন্দ্র করে। কাল্পনিক এ দেশটি শাসন করছে অ্যান্টন কাস্টিলো। নিষ্ঠুর এ শাসক সাধারণ মানুষের ওপর অত্যাচারের পাশাপাশি দেশ পরিচালনায়ও ব্যর্থ। আর তাই একসময়ের সমৃদ্ধ দেশটি অর্থনৈতিকভাবে এবং প্রযুক্তি ব্যবহারে অনেক পিছিয়ে পড়েছে। অত্যাচারী শাসকের কারণে প্রতিবেশী দেশগুলোও ইয়ারার সঙ্গে সম্পর্ক ত্যাগ করেছে। আর তাই অ্যান্টন কাস্টিলোর কাছ থেকে ইয়ারাকে মুক্ত করতে গেরিলাযুদ্ধে নামে ‘ডানি রোজাস’। এই বীর গেরিলাযোদ্ধার পরিচয়েও নিজেকে খুঁজে পাওয়া যাবে গেমটিতে।</p>",
"id": "c52035cd-c313-4e69-8123-98b2d2247228"
},
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\"></p><embed alt=\"\" embedtype=\"image\" format=\"fullwidth\" id=\"4\"/><p data-block-key=\"6q2ur\"></p>",
"id": "516a6751-3788-44b9-a984-a81807baf455"
},
{
"type": "full_richtext",
"value": "<p data-block-key=\"a9kn6\">অ্যাকশননির্ভর গেমটির গ্রাফিকস খুবই উন্নত মানের। আর তাই গহিন জঙ্গলে গা ঢাকা দিয়ে অ্যান্টন কাস্টিলো বাহিনীর বিরুদ্ধে লড়াইয়ের সময় প্রতি পদে মিলবে যুদ্ধের আবহ। গেমটিতে তিনটি স্থানে গেরিলা হামলার সুযোগ মিলবে। তিনটি স্থানে হামলার সময় ভিন্ন পথে আলাদা চরিত্রের গেরিলা বাহিনীর মাধ্যমে শত্রুর বিরুদ্ধে লড়াই করতে হবে। এ সময় প্রধান ক্যাম্প পরিবর্তনের পাশাপাশি নতুন অস্ত্র, হামলার স্থান ও কৌশলে পরিবর্তন আনতে হওয়ায় প্রতিটি হামলার সময়ই মনে হবে নতুন গেম খেলছেন।</p><p data-block-key=\"4a3f3\"></p><p data-block-key=\"3j3go\">গেমটিতে গেরিলাযুদ্ধের সময় সহযোগী হিসেবে দেখা মিলবে বেশ কিছু চরিত্রের, যাদের মধ্যে জুয়ান কর্টেজ অন্যতম। যুদ্ধের ময়দানে আপনার মনোবল ঠিক রাখতে হাস্যকর বিভিন্ন ঘটনা নিয়মিত ঘটাবে মজার এ চরিত্র। এল টেগরের নাম না বললেই নয়, সাবেক এ গেরিলাযোদ্ধা অভিজ্ঞতা ও পরামর্শ দিয়ে যুদ্ধে জয়ী হতে ভূমিকা রাখবে। এ ছাড়া বিভিন্ন এলাকায় থাকা প্রধান ক্যাম্পে দেখা মিলবে বিভিন্ন চরিত্রের।<br/>ইউবিসফটের তৈরি গেমটি উইন্ডোজের পাশাপাশি প্লেস্টেশন ৪, প্লেস্টেশন ৫, এক্সবক্স ওয়ান, সিরিজ এক্স ও সিরিজ এস এবং গুগল স্ট্যাডিয়াতেও খেলা যাবে।<br/></p><h3 data-block-key=\"12s3k\"><b>কম্পিউটারে খেলতে কমপক্ষে যা লাগবে</b></h3><p data-block-key=\"1bcsg\">অপারেটিং সিস্টেম: উইন্ডোজ ১০<br/>প্রসেসর: ইন্টেল কোর আইসেভেন বা এমএমডি রাইজেন ফাইভ<br/>মেমোরি: ১৬ গিগাবাইট র‍্যাম<br/>গ্রাফিকস: ৮ গিগাবাইটের এএমডি আরএক্স ৪৬০ অথবা এনভিডিয়া জিফোর্স জিটিএক্স ৯৬০।<br/>জায়গা: ৬০ গিগাবাইট</p>",
"id": "7754100b-d91b-477c-92da-45cee0962dca"
}
],
I have this type of array from api.
I can showed the string data, but cannot show the embedded image.
I am using below code for shown the string from the api. Help me to find out the problem, Thanks to All
<div className='Details-news-content'>
{
newss.content.map((data, index) => (
<p key={index} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(data.value) }}>
</p>))}
</div>
It's codded in Wagtail.
In wagtail API if the content's Richtext is not serialized the API will show wired type HTML format in API.
in this case, add this code in blocks.py
from wagtail.core import blocks
from wagtail.core.templatetags.wagtailcore_tags import richtext
class RichtextBlock(blocks.RichTextBlock):
def get_api_representation(self, value, context=None):
return richtext(value.source)
Source: https://learnwagtail.com/tutorials/headless-cms-serializing-richtext-blocks/

Images show up as '[object HTMLImageElement] ' in React

I have a drop-down auto search component built using react, the problem is that it does not allow for images currently. Here is a sample of how the code works and what the problem is in this 22-second video:
https://www.youtube.com/watch?v=kSAbTiHEJhM&feature=youtu.be
In the video when I type Caleb it shows up as Caleb [object HTMLImageElement] instead of Caleb with the image next to it.
Not sure how to implement this but my first guess is adding image to state, however I am not sure exactly where to add it in the rest of the code or even what I would set the image state too.
The AutoCompleteText.js has all the functionality in it whereas countries.js is just a list of countries with a name and an image added on to the end to test the functionality.
AutoCompleteText.js
import React from 'react';
import './AutoCompleteText.css';
export default class AutoCompleteText extends React.Component {
constructor (props) {
super(props);
this.state = {
suggestions: [],
text: ''
};
}
onTextChanged = (e) => {
const { items } = this.props;
const value = e.target.value;
let suggestions = [];
if(value.length > 0) {
const regex = new RegExp(`^${value}`, 'i');
suggestions = items.sort().filter(v => regex.test(v));
}
this.setState(() => ({ suggestions, text: value}));
}
suggestionSelected (value) {
this.setState(() => ({
text: value,
suggestions: [],
}))
}
renderSuggestions () {
const { suggestions } = this.state;
if(suggestions.length === 0) {
return null;
}
return (
<ul>
{suggestions.map((item) => <li onClick={() => this.suggestionSelected(item)}>{item}</li>)}
</ul>
);
}
render () {
const { text } = this.state;
return (
<div className="AutoCompleteText">
<input value={text} onChange={this.onTextChanged} type="text" />
{this.renderSuggestions()}
</div>
)
}
}
countries.js
const image = new Image();
image.src = '../images/myself.jpg'
export default `Afghanistan
Albania
Algeria
Andorra
Angola
Antigua & Deps
Argentina
Armenia
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bhutan
Bolivia
Bosnia Herzegovina
Botswana
Brazil
Brunei
Bulgaria
Burkina
Burundi
Cambodia
Cameroon
Canada
Cape Verde
Central African Rep
Chad
Chile
China
Colombia
Comoros
Congo
Congo {Democratic Rep}
Costa Rica
Croatia
Cuba
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
East Timor
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Ethiopia
Fiji
Finland
France
Gabon
Gambia
Georgia
Germany
Ghana
Greece
Grenada
Guatemala
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland {Republic}
Israel
Italy
Ivory Coast
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Korea North
Korea South
Kosovo
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macedonia
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Mauritania
Mauritius
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Morocco
Mozambique
Myanmar, {Burma}
Namibia
Nauru
Nepal
Netherlands
New Zealand
Nicaragua
Niger
Nigeria
Norway
Oman
Pakistan
Palau
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Poland
Portugal
Qatar
Romania
Russian Federation
Rwanda
St Kitts & Nevis
St Lucia
Saint Vincent & the Grenadines
Samoa
San Marino
Sao Tome & Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Sudan
Spain
Sri Lanka
Sudan
Suriname
Swaziland
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Togo
Tonga
Trinidad & Tobago
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Yemen
Zambia
Zimbabwe
Caleb ${image}`.split('\n')
This is happening because you are concatenating image object with the string.
Check the output below:-
const image = new Image();
image.src = '../images/myself.jpg';
var arr = [`Caleb ${image}`.split('\n')];
console.log(arr[0])
If you want to show country name followed by image url in the list then try
`Caleb ${image.src}`.split('\n')
You can't display image in the list directly using this way.
If you want to show image followed by string then use <img> tag.
let image = '<img src="https://static.daniweb.com/avatars/avatar747225.gif" />';
var country = `Celeb ${image}`;
document.getElementById('country').innerHTML = country
<ul>
<li id="country">sadfa</li>
</ul>

OpenLayers 3 ArcGIS Cache Server Local Files

Some days ago I did an ArcGISCache visor with OpenLayers 2.12 with some tiles in this folder and file format:
_alllayers\L04\R00000009\C00000a07.png
This means that my tiles are inside "_alllayers" folder and then inside other folders that means Zoom Level (L00,L01...L21). Inside them i have some other folders with their name like: "R00000009" and then inside those folders I have the images named like: "C00000a07.png".
When I did the visor for OpenLayers 2.12 or OpenLayers 2.14 I did it well and works right. But when I have tried to do the same with OpenLayers 3, it doesn't work.
OpenLayers 2.12 / OpenLayers 2.14
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers</title>
<style>
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="lib/OpenLayers.2.14.js"></script>
<script>
var map,
cacheLayer,
testLayer,
//This layer requires meta data about the ArcGIS service. Typically you should use a
//JSONP call to get this dynamically. For this example, we are just going to hard-code
//an example that we got from here (yes, it's very big):
// http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json&pretty=true
layerInfo = {
"currentVersion" : 10.01,
"serviceDescription" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, and a number of countries in Europe and elsewhere. This comprehensive street map includes highways, major roads, minor roads, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The street map was developed by ESRI using ESRI basemap data, AND road data, USGS elevation data, and UNEP-WCMC parks and protected areas for the world, and Tele Atlas Dynamap� and Multinet� street data for North America and Europe. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Northern Ireland (Belfast only), Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico (Mexico City only), Russia (Moscow and St. Petersburg only), South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us \u003ca href=\"http://goto.arcgisonline.com/maps/World_Street_Map \" target=\"_new\"\u003eonline\u003c/a\u003e.",
"mapName" : "Layers",
"description" : "This worldwide street map presents highway-level data for the world and street-level data for the United States, Canada, Japan, Southern Africa, most countries in Europe, and several other countries. This comprehensive street map includes highways, major roads, minor roads, one-way arrow indicators, railways, water features, administrative boundaries, cities, parks, and landmarks, overlaid on shaded relief imagery for added context. The map also includes building footprints for selected areas in the United States and Europe and parcel boundaries for much of the lower 48 states.\n\nThe street map was developed by ESRI using ESRI basemap data, DeLorme base map layers, AND road data, USGS elevation data, UNEP-WCMC parks and protected areas for the world, Tele Atlas Dynamap� and Multinet� street data for North America and Europe, and First American parcel data for the United States. Coverage for street-level data in Europe includes Andorra, Austria, Belgium, Czech Republic, Denmark, France, Germany, Great Britain, Greece, Hungary, Ireland, Italy, Luxembourg, Netherlands, Norway, Poland, Portugal, San Marino, Slovakia, Spain, Sweden, and Switzerland. Coverage for street-level data elsewhere in the world includes China (Hong Kong only), Colombia, Egypt (Cairo only), Indonesia (Jakarta only), Japan, Mexico, Russia, South Africa, Thailand, and Turkey (Istanbul and Ankara only). For more information on this map, visit us online at http://goto.arcgisonline.com/maps/World_Street_Map\n",
"copyrightText" : "Sources: ESRI, DeLorme, AND, Tele Atlas, First American, ESRI Japan, UNEP-WCMC, USGS, METI, ESRI Hong Kong, ESRI Thailand, Procalculo Prosis",
"layers" : [
{
"id" : 0,
"name" : "World Street Map",
"parentLayerId" : -1,
"defaultVisibility" : true,
"subLayerIds" : null,
"minScale" : 0,
"maxScale" : 0
}
],
"tables" : [
],
"spatialReference" : {
"wkid" : 102100
},
"singleFusedMapCache" : true,
"tileInfo" : {
"rows" : 256,
"cols" : 256,
"dpi" : 96,
"format" : "JPEG",
"compressionQuality" : 90,
"origin" : {
"x" : -20037700,
"y" : 30241100
},
"spatialReference" : {
"wkid" : 102100
},
"lods" : [
{'level' : 0, 'resolution' : 156543.03403606807, 'scale' : 591657528},
{'level' : 1, 'resolution' : 78271.517018034036, 'scale' : 295828764},
{'level' : 2, 'resolution' : 39135.758509017018, 'scale' : 147914382},
{'level' : 3, 'resolution' : 19567.879254508509, 'scale' : 73957191},
{'level' : 4, 'resolution' : 9783.9394949623238, 'scale' : 36978595},
{'level' : 5, 'resolution' : 4891.9698797730935, 'scale' : 18489298},
{'level' : 6, 'resolution' : 2445.9849398865467, 'scale' : 9244649},
{'level' : 7, 'resolution' : 1222.992337651342, 'scale' : 4622324},
{'level' : 8, 'resolution' : 611.49616882567102, 'scale' : 2311162},
{'level' : 9, 'resolution' : 305.74808441283551, 'scale' : 1155581},
{'level' : 10, 'resolution' : 152.87417449834899, 'scale' : 577791},
{'level' : 11, 'resolution' : 76.436954957243259, 'scale' : 288895},
{'level' : 12, 'resolution' : 38.218609770552874, 'scale' : 144448},
{'level' : 13, 'resolution' : 19.109304885276437, 'scale' : 72224},
{'level' : 14, 'resolution' : 9.5546524426382184, 'scale' : 36112},
{'level' : 15, 'resolution' : 4.7773262213191092, 'scale' : 18056},
{'level' : 16, 'resolution' : 2.3886631106595546, 'scale' : 9028},
{'level' : 17, 'resolution' : 1.1943315553297773, 'scale' : 4514},
{'level' : 18, 'resolution' : 0.59716577766488865, 'scale' : 2257},
{'level' : 19, 'resolution' : 0.2984505969011938, 'scale' : 1128},
{'level' : 20, 'resolution' : 0.1492252984505969, 'scale' : 564},
{'level' : 21, 'resolution' : 0.061383456100245537, 'scale' : 282}
]
},
"initialExtent" : {
"xmin" : -20037507.0671618,
"ymin" : -20037507.0671618,
"xmax" : 20037507.0671618,
"ymax" : 20037507.0671619,
"spatialReference" : {
"wkid" : 102100
}
},
"fullExtent" : {
"xmin" : -20037507.0671618,
"ymin" : -20037507.0671618,
"xmax" : 20037507.0671618,
"ymax" : 20037507.0671619,
"spatialReference" : {
"wkid" : 102100
}
},
"units" : "esriMeters",
"supportedImageFormatTypes" : "PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,AI,BMP",
"documentInfo" : {
"Title" : "World Street Map",
"Author" : "ESRI",
"Comments" : "",
"Subject" : "streets, highways, major roads, railways, water features, administrative boundaries, cities, parks, protected areas, landmarks ",
"Category" : "transportation(Transportation Networks) ",
"Keywords" : "World, Global, 2009, Japan, UNEP-WCMC",
"Credits" : ""
},
"capabilities" : "Map"
};
function init() {
var maxExtent = new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34);
var layerMaxExtent = new OpenLayers.Bounds(
layerInfo.fullExtent.xmin,
layerInfo.fullExtent.ymin,
layerInfo.fullExtent.xmax,
layerInfo.fullExtent.ymax
);
var resolutions = [];
for (var i=0; i<layerInfo.tileInfo.lods.length; i++) {
resolutions.push(layerInfo.tileInfo.lods[i].resolution);
}
map = new OpenLayers.Map('map', {
maxExtent: maxExtent,
StartBounds: layerMaxExtent,
units: (layerInfo.units == "esriFeet") ? 'ft' : 'm',
resolutions: resolutions,
tileSize: new OpenLayers.Size(layerInfo.tileInfo.width, layerInfo.tileInfo.height),
projection: 'EPSG:' + layerInfo.spatialReference.wkid
});
cacheLayer = new OpenLayers.Layer.ArcGISCache( "AGSCache",
"http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers", {
isBaseLayer: false,
useArcGISServer: false,
resolutions: resolutions,
tileSize: new OpenLayers.Size(layerInfo.tileInfo.cols, layerInfo.tileInfo.rows),
tileOrigin: new OpenLayers.LonLat(layerInfo.tileInfo.origin.x , layerInfo.tileInfo.origin.y),
maxExtent: layerMaxExtent,
projection: 'EPSG:' + layerInfo.spatialReference.wkid
});
testLayer = new OpenLayers.Layer.Google(
"Google Streets",
{'sphericalMercator': true, numZoomLevels: 21}
);
map.addLayers([cacheLayer, testLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl( new OpenLayers.Control.MousePosition() );
map.zoomToExtent(new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34));
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
As I said, this works fine. But when I try to do the same at OpenLayers 3, I can't. I don't know why is asking for the images like there is a service.
OpenLayers 3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers</title>
<style>
html, body, #map {
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="lib/OpenLayers.3.js"></script>
<script>
function init(){
var url = 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers';
var layers = [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Tile({
extent: [-20037507.0671618,-20037507.0671618,20037507.0671618,20037507.0671619],
source: new ol.source.TileArcGISRest({
url: url
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [-20037700, 30241100],
zoom: 1
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
When I try to load this OpenLayers 3 visor, I can see in the console some 404 error and this is the type of URL that it tries to find:
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image&FORMAT=PNG32&TRANSPARENT=true&SIZE=256%2C256&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244&BBOXSR=3857&IMAGESR=3857&DPI=90
Pretty Print
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/?F=image
&FORMAT=PNG32
&TRANSPARENT=true
&SIZE=256%2C256
&BBOX=-20037508.342789244%2C0%2C0%2C20037508.342789244
&BBOXSR=3857
&IMAGESR=3857
&DPI=90
So, my questions are:
- Why OpenLayers 3 is asking for the images (tiles) like it was a Service behind?
- Hoy can I use my tiles in OpenLayers 3?
I have tried to change the URL with this patterns:
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/ImageServer/export
http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/Tiles/{z}/{x}/{y}
Edit:
Finally I have solved! I hava made in Java a program that converts all those folders and pictures names.
I was trying to understand the pattern that the names of folders and images has, and finally I realized that the first letter of the folders meant the rows ( R -> row) and the first letter of the images meant columns ( C -> column).
Once you have removed the first letter , just needed to convert that number Hexadecimal to Decimal and save the file or folder with that new name.
If someones need some help with this, I will happy to help.
ol.source.ArcGISRest is for ArcGIS server tile services. For ArcGISCache, you will want to use an ol.source.TileImage or ol.source.XYZ with a custom tileUrlFunction or tileLoadFunction. I prefer the latter, because then I do not have to convert tile coordinates. Something like
function replacer(match, letter, value) {
var str = Number(value).toString(letter == 'L' ? 10 : 16);
var len = letter == 'L' ? 2 : 8;
while (str.length < len) {
str = '0' + str;
}
return letter + str;
}
var source = new ol.source.XYZ({
url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{x}/C{y}.png',
tileLoadFunction: function(image, url) {
image.getImage().src = url
.replace(/(L)([0-9]+)/, replacer)
.replace(/(R)([0-9]+)/, replacer)
.replace(/(C)([0-9]+)/, replacer);
}
});
#ahocevar solutions works. But I had to swap the x and y in the URL.
url: 'http://MY_IP:MY_PORT/MY_FOLDER/Layers/_alllayers/L{z}/R{y}/C{x}.png'
This makes sense, because y would map to rows and x to colums.

ng-options get referenced document and display its field as value for dropdown population

I'm working with meteor+angular. The following loops through all the documents in the items collection. Within the loop, once a meal == true is hit, it loops the related combos to make dropdowns that use as options, documents from the comboitems collection.
// controller.ng.js
angular.module("myApp").controller("menuCtrl",
function($scope, $stateParams, $meteor){
$scope.items = $meteor.collection(Items);
$scope.combos = $meteor.collection(Combos);
$scope.comboitems = $meteor.collection(Comboitems);
}
);
// view.ng.html
<div ng-repeat="item in items">
<div ng-if="true === item.meal">
<ul>
<li ng-repeat="combo in combos | filter: {itemId: item._id}">
<select ng-model="comboitems" ng-options="comboitem.itemId for comboitem in (comboitems | filter: {comboId: combo._id})"></select>
</li>
</ul>
</div>
</div>
Using the data provided below, once I hit Pizza Meal I will have two dropdowns: Choose your pizza and Choose your drink, where in the former I will be able to choose between pizza 1 and pizza 2, while in the latter between drink 1 and drink 2.
This is the result
My issue is that I can't find a way to render the item.name, knowing its id in the comboitems collection once the <select> is being rendered.
Here is a sample data showing how the relations work:
items collection:
_id | name | price | meal
---------------------------------
a | pizza 1 | 5.00 | false
b | pizza 2 | 6.00 | false
c | drink 1 | 1.00 | false
d | drink 2 | 1.00 | false
e | Pizza meal | 5.00 | true
combos collection:
_id | name | itemId
-----------------------------------
x | Choose your pizza | e
y | Choose your drink | e
comboitems collection:
_id | itemId | comboId
-----------------------
1 | a | x
2 | b | x
3 | c | y
3 | d | y
Use select as in your ng-options directive:
<select ng-model="selectesdItem"
ng-options="comboitem.itemId as getName(comboitem.itemId) for comboitem in (comboitems | filter: {comboId: combo._id})">
</select>
and bind the result to a function that will return the name:
$scope.getName = function(id) {
return $filter('filter')($scope.items, { _id: id }, true)[0].name;
}
http://plnkr.co/edit/efym7LpeSjIqkDKbdLR0?p=preview

Show Post with its comments using ng-repeat not working

I am facing an issue in building below format in MVC using AngularJS
I am showing the posts from the facebook using api with ng-repeat which consists of a Image.
Now the problem i am facing to show the comments for each of the posts using nested ng-repeat.
Dont have any idea how to proceed with it.
ng-repeat nested sample
http://plnkr.co/edit/NGWOZ4?p=info
I think you need something like that?
<body ng-controller="programController">
<div class="panel-group" ng-repeat="row in osk.programs">
<div>{{row.day}}</div>
<div>
<h4>{{row.head}}</h4>
<p>{{row.content}}</p>
<aside class="warning" ng-repeat="row in row.extra">
<strong>Ekstra Gezi:</strong> {{row.exhead}} <span>{{row.price}}</span>
<p>{{row.excontent}}</p>
</aside>
</div>
</div>
</body>
var myApp = angular.module('myApp', []);
myApp.controller('programController', function($scope) {
var json = {
"programs":
[
{
"day":"1.GÜN",
"head":"İstanbul-Amsterdam",
"content":"Gezimizin ilk günü, kalkıştan iki saat önce Sabiha Gökçen Havalimanı Dış Hatlar Terminali Etstur Kontuarı önünde buluşarak başlıyor. Pegasus Hava Yolları tarifeli seferi ile Amsterdam’a uçuş. Havalimanında bizleri bekleyen otobüsümüz ile Amsterdam şehir turu. Bu gezide Tarihi Tren İstasyonu, Dam Meydanı, Ajax Arena Stadı, Tarihi Çiçek Pazarı ve yel değirmenleri görülecek yerlerden bazıları. Misafirlerimiz ekstra olarak düzenlenecek Amsterdam Kanallar Gezisi'ne katılabilirler. Şehir turu sonrası otele transfer. Öğleden sonra serbest zaman. Geceleme otelimizde.",
"extra":
[
{
"exhead":"Amsterdam kanallar gezisi",
"price":"55 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri cam olan teknelerle Amsterdam’ın simgesi haline gelmiş kanalları arasında eğlenceli gezi sizi bekliyor."
},
{
"exhead":"Tekne Turu",
"price":"15 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri"
}
]
},
{
"day":"2.GÜN",
"head":"Amsterdam-Paris",
"content":"Gezimizin ilk günü, kalkıştan iki saat önce Sabiha Gökçen Havalimanı Dış Hatlar Terminali Etstur Kontuarı önünde buluşarak başlıyor. Pegasus Hava Yolları tarifeli seferi ile Amsterdam’a uçuş. Havalimanında bizleri bekleyen otobüsümüz ile Amsterdam şehir turu. Bu gezide Tarihi Tren İstasyonu, Dam Meydanı, Ajax Arena Stadı, Tarihi Çiçek Pazarı ve yel değirmenleri görülecek yerlerden bazıları. Misafirlerimiz ekstra olarak düzenlenecek Amsterdam Kanallar Gezisi'ne katılabilirler. Şehir turu sonrası otele transfer. Öğleden sonra serbest zaman. Geceleme otelimizde.",
"extra":
[
{
"exhead":"Amsterdam kanallar gezisi",
"price":"55 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri cam olan teknelerle Amsterdam’ın simgesi haline gelmiş kanalları arasında eğlenceli gezi sizi bekliyor."
},
{
"exhead":"Tekne Turu",
"price":"15 Euro",
"excontent":"Amsterdam’a farklı açıdan bakmak isteyenler için üzeri"
}
]
}
]
};
$scope.osk = json;
});

Resources